注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

完全响应式的jQuery传送带插件slick

媒体 fishcity 2371浏览

jQuery传送带插件slick

  slick 是一款完全响应式jQuery 传送带插件,能够根据容器自动适应宽度。在现代浏览器中会使用 CSS3 来实现特殊效果,可以使用扩展方法对项目进行添加、删除和过滤。这是一款非常实用的 jQuery 传送带插件,可使用于PC端与移动端。下面来看下使用方法:

构建html结构

<div class="your-class">
  <div>您的内容</div>
  <div>您的内容</div>
  <div>您的内容</div>
</div>

引入CSS样式

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

引入JS库文件

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>				

初始化插件

$(document).ready(function(){
	$('.your-class').slick({
	  setting-name: setting-value
	});
});

最终代码如下:

<html>
    <head>
    <title>My Now Amazing Webpage</title>
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    </head>
    <body>

    <div class="your-class">
        <div>your content</div>
        <div>your content</div>
        <div>your content</div>
    </div>

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('.your-class').slick({
                setting-name: setting-value
            });
        });    </script>

    </body>
</html>

更多的参数设置请参考实例或是官方文档。

转载请注明:jQ酷 » 完全响应式的jQuery传送带插件slick

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。