您的位置：首页 > Web前端 > JQuery

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

2017-05-11 11:56 399 查看

最近第一次接触到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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 插件 slick

相关文章推荐

新的分享

章节导航