slick轮播插件操作 记录
插件说明文档
官方文档
https://kenwheeler.github.io/slick/
中文文档
https://www.cnblogs.com/chalkbox/p/13159637.html
基础使用
<style>
.aa{ display:flex; flex-wrap: nowrap;}
.aa .aa-item{width:calc(25% - 18px); margin-left:24px;margin-bottom: 32px; background:yellow; overflow:auto; height:200px; flex-shrink: 0;}
</style>
<div class="aa">
<div class="aa-item">1</div>
<div class="aa-item">2</div>
<div class="aa-item">3</div>
<div class="aa-item">4</div>
<div class="aa-item">5</div>
<div class="aa-item">6</div>
<div class="aa-item">7</div>
</div>
<script>
$(function(){
$(".aa").slick({
slidesToShow: 4,
slidesToScroll: 1 ,
swipeToSlide:true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: true
}
}
]
});
})
</script>
不常使用的操作
//取消轮播
$(".aa").slick("unslick");
//暂停自动轮播
$(".aa").slick("slickPause");
//开启自动轮播
$(".aa").slick("slickPlay");
//暂停轮播 代码在 但是不能轮播了 包括触摸 不会改变目前的样式
$(".aa").slick("cleanUpEvents");
//恢复暂停的轮播 在目前的版本开始 不是重新示例化轮播
$(".aa").slick("initializeEvents");