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