slick 是一个可以实现幻灯片效果的 jquery 插件。
具有以下特点:
* 支持响应式
* 浏览器支持 CSS3 时,则使用 CSS3 过度/动画
* 支持移动设备滑动
* 支持桌面浏览器鼠标拖动
* 支持左右控制
* 支持动态添加、删除、过滤
* 支持自定义滑动按钮
* 支持自动播放、圆点、箭头、回调等等
使用方法
引入文件
<script type="text/javascript" src="../src/js/jquery.js"></script>
<link rel="stylesheet" href="../src/css/slick/slick.css">
<link rel="stylesheet" href="../src/css/slick/slick-theme.css">
<script type="text/javascript" src="../src/js/slick.min.js"></script>
HTML
<div class="slider" data-slick='{"slidesToShow": 3, "slidesToScroll": 3}'>
<div>
<img src="../src/images/photo.jpeg" />
<span class="title">Picture1</span>
</div>
<div>
<img src="../src/images/photo.jpeg" />
<span class="title">Picture2</span>
</div>
<div>
<img src="../src/images/photo.jpeg" />
<span class="title">Picture3</span>
</div>
<div>
<img src="../src/images/photo.jpeg" />
<span class="title">Picture4</span>
</div>
</div>
JavaScript
$(function(){
$(".slider").slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
});