slick轮播插件操作 记录

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");