浅析Jquery里slick插件常用属性用途

最新推荐文章于 2023-12-08 18:02:53 发布

要做前端的一股清流

最新推荐文章于 2023-12-08 18:02:53 发布

阅读量6.7k

点赞数 1

分类专栏： web前端学习文章标签： jquery 插件 slick

本文链接：https://blog.csdn.net/qq_31915745/article/details/71611261

版权

web前端学习专栏收录该内容

22 篇文章 4 订阅

订阅专栏

最近第一次接触到jquery的slick插件，由于是修改别人的代码，所以不得不查了一下插件的文档。发现网络上大多数都是官网文档，所以打算自己写一个demo对一些没搞明白的属性做一个说明和记录。这里只用到了一些常用属性，博主觉得基本够用。

<!DOCTYPE html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
 </head>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <link rel="stylesheet" href="slick.css">
 <script src="slick.min.js"></script>
<body>
<div class="slick">
    <div><a href="#"><img src="images/bx.jpg"></a></div>
    <div><a href="#"><img src="images/hafo.jpg"></a></div>
    <div><a href="#"><img src="images/standfo.jpg"></a></div>
    <div><a href="#"><img src="images/intro-bg.jpg"></a></div>
</div>
<script>
    $('.slick').slick({
        dots: true,   //是否有轮播的点出现
        infinite: false,  //图片是否可循环
        speed: 300,  //the speed of change pics
        slidesToShow: 1,  //当屏幕分辨率大于下面breakpoint最大值时显示的图片数量
        slidesToScroll: 1, //文档上说是每次滑动图片的个数，尝试了很多个组合都没看出效果？希望大家解释一下这个的用法
        centerMode:true,
        centerPadding:'50 px',
        responsive: [
            {
                breakpoint: 600, //屏幕分辨率<600时执行下列属性,且不会继承上面设定的属性。
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite: true,
                    dots: true
                }
            },
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 3,
                    infinite:false,
                    dots:true,
                    centerMode:true, //若为false则图片可以完全显示，同时centerMode属性无效
                    centerPadding:'100px' //主要用来调整中心与其他图片的内边距。此处测试当为100px缩小与
                                          //相邻图片距离，若为-100px则扩大边距。
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });

</script>
</body>
</html>

注：这里需要先下载slick.min.js和slick.css两个包文件。当然你也可以直接用链接导入。网上很多资源很容易找。

代码中用的是本地图片，这里换成自己的就可以。因为demo简单，这里就不po出效果图，望见谅。

转载请注明作者。

这里再列出几个比较好的slick插件文档，一个是官方例子，一个是中文文档：

http://www.dowebok.com/84.html

http://www.jq22.com/yanshi406

要做前端的一股清流

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅析Jquery里slick插件常用属性用途

最近第一次接触到jquery的slick插件，由于是修改别人的代码，所以不得不查了一下插件的文档。发现网络上大多数都是官网文档，所以打算自己写一个demo对一些没搞明白的属性做一个说明和记录。这里只用到了一些常用属性，博主觉得基本够用。 $('.slick').slick({ dots:
复制链接

扫一扫

专栏目录