輪播插件Slick.js使用方法詳解

Slick/Slick.js使用方法（個人總結）/Slick.js介紹

相比於Swiper而選擇使用Slick.js的原因主要是因為其兼容不錯並且在手機端的滑動效果更順暢

 

官方參數介紹：官方地址

參數	類型	默認值	描述
accessibility	布爾值	TRUE	啟用Tab鍵和箭頭鍵導航
adaptiveHeight	布爾值	FALSE	為單滑塊水平輪播啟用自適應高度。
autoplay	布爾值	FALSE	啟用自動播放
autoplaySpeed	數值	3000	自動播放速度（以毫秒為單位）
arrows	布爾值	TRUE	上一個/下一個箭頭
asNavFor	字符串	null	將滑塊設置為其他滑塊的導航（類或ID名稱）
appendArrows	字符串	$(element)	更改導航箭頭的附加位置（選擇器，htmlString，數組，元素，jQuery對象）
appendDots	字符串	$(element)	更改導航點的附加位置（選擇器，htmlString，數組，元素，jQuery對象）
prevArrow	代碼段/element	<button class="slick-prev" aria-label="Previous" type="button">Previous</button> /$('.prev-next .prev')	允許您選擇節點或為“上一個”箭頭自定義HTML
nextArrow	代碼段/element	<button class="slick-next" aria-label="Next" type="button">Next</button> /$('.prev-next .next')	允許您選擇節點或為“下一步”箭頭自定義HTML。
centerMode	布爾值	FALSE	通過部分上一張/下一張幻燈片啟用居中視圖。與奇數的slidesToShow計數一起使用。
centerPadding	字符串	'50px'	處於中心模式時的側面填充（像素或％）
cssEase	字符串	'ease'	CSS3動畫緩動
customPaging	function	n/a	自定義分頁模板
dots	布爾值	FALSE	顯示圓點指示器
dotsClass	字符串	'slick-dots'	滑動指示器點容器類
draggable	布爾值	TRUE	啟用鼠標拖動
fade	布爾值	FALSE	啟用淡入淡出
focusOnSelect	布爾值	FALSE	啟用對選定元素的關注（單擊）
easing	字符串	'linear'	為jQuery動畫添加緩動。與緩動庫或默認緩動方法一起使用
edgeFriction	數值	0.15	滑動非無限輪播邊緣時的阻力
infinite	布爾值	TRUE	無限循環滑動
initialSlide	數值	0	滑動即可開始
lazyLoad	字符串	'ondemand'	設置延遲加載技術。接受“按需”或“漸進式”
mobileFirst	布爾值	FALSE	響應式設置使用移動優先計算
pauseOnFocus	布爾值	TRUE	暫停焦點自動播放
pauseOnHover	布爾值	TRUE	懸停時暫停自動播放
pauseOnDotsHover	布爾值	FALSE	懸停點時暫停自動播放
respondTo	字符串	'window'	響應對象響應的寬度。可以是“窗口”，“滑塊”或“最小”（兩者中較小的一個）
responsive	對象	none	包含斷點和設置對象的對象（請參見演示）。在給定的屏幕寬度下啟用設置設置。將設置設置為“ unslick”而不是對象，以禁用給定斷點處的滑動。
rows	數值	1	將此設置為大於1將初始化網格模式。使用slidesPerRow設置每行應有多少張幻燈片。(輪播行數)
slide	element	''	元素查詢用作幻燈片
slidesPerRow	數值	1	通過“行”選項初始化網格模式后，可以設置每個網格行中有多少張幻燈片
slidesToShow	數值	1	要顯示的幻燈片數量
slidesToScroll	數值	1	要滾動的幻燈片數
speed	數值(ms)	300	滑動/淡入淡出動畫速度
swipe	布爾值	TRUE	啟用swiping
swipeToSlide	布爾值	FALSE	允許用戶直接拖動或滑動到幻燈片上，而與slidesToScroll無關
touchMove	布爾值	TRUE	輕觸即可滑動
touchThreshold	數值	5	要推進幻燈片，用戶必須滑動（1 / touchThreshold）*滑塊的寬度
useCSS	布爾值	TRUE	啟用/禁用CSS過渡
useTransform	布爾值	TRUE	啟用/禁用CSS轉換
variableWidth	布爾值	FALSE	可變寬度的幻燈片
vertical	布爾值	FALSE	垂直滑動模式
verticalSwiping	布爾值	FALSE	垂直滑動模式
rtl	布爾值	FALSE	更改滑塊的方向以從右到左
waitForAnimate	布爾值	TRUE	忽略動畫時前進幻燈片的請求
zIndex	數值	1000	設置幻燈片的zIndex值，對IE9和更低版本有用

 

 

基本使用：，一般使用只需前十個屬性

$('.box ul').slick({
        autoplay: true, //是否自動播放
        pauseOnHover: false,  //鼠標懸停暫停自動播放
        speed: 1500,  //切換動畫速度
        autoplaySpeed: 5000,  //自動播放速度
        slidesToShow: 1,  //要顯示的動畫速度
        swipeToSlide: true,  //允許用戶直接拖動或滑動到幻燈片上
        touchThreshold: 100,  //更換幻燈片需滑動寬度（1 / touchThreshold）
        centerMode: true,  //啟動居中
        centerPadding: '0', //處於中心模式時的側面填充（像素或％）
　　　　　arrows: false, //是否開啟左右切換

　　　　　draggable: true, //是否啟用鼠標拖動
　　　　　rows: 2,  //顯示幾行，默認為 1
　　　　　vertical: false， //是否開啟垂直滑動模式
　　　　　verticalSwiping: false,  //是否開啟垂直滑動切換

    });

 

輪播效果：

fade：true // 開啟漸隱切換模式
// 進階，添加緩動
cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)' // 自定義緩動
cssEase: 'linear', // 緩動庫緩動

// 不間斷輪播演示，即利用緩動庫實現輪播沒有停頓
$('#index-body .gallery .gallery-box ul').slick({
    autoplay: true,
    pauseOnHover: true,
    speed: 4000,
    autoplaySpeed: 0,
    slidesToShow: 3,
    touchThreshold: 100,
    cssEase: 'linear',
});

　　

方法使用示例Function：

方法	對象	說明
beforeChange	slick, currentSlide, nextSlide	更換幻燈片前觸發（當前對象，當前索引，下一個索引）

 

 

 

將兩個序列關聯起來：（.list ul li是列表，.box ol 是幻燈片）

$('.box ol').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  $(".list ul li").eq(nextSlide).addClass('active').siblings().removeClass('active');
    });
});

 

或者將兩個幻燈片關聯起來:

<div class="list">
    <ul class="time">
    <li class="line">2003</li>
 　　<li class="line">2001</li>
　　<li class="line">1998</li>
    </ul>
     <div class="small"></div>
 </div>

<div class="box">
    <ol>
       <li>
        <div class="grid">
        <div class="left">
        　　<span>1998 year</span>
        　　<h4>第一個幻燈片</h4>
　　　　　<div class="con">
　　　　　　1998 ind
　　　　　</div>
　　　　　<div class="more">
　　　　　　　<a class="prev">previous</a>
　　　　　　　<a class="next">next 2000</a>
　　　　　</div>
　　　　　</div>
　　　　　<div class="right">
　　　　　<div class="img-box">
　　　　　　　<img src="1.img">
　　　　　</div>
　　　　　</div>
　　　　　</div>
　　　　</li>
<li>
<div class="grid">
        <div class="left">
        　　<span>2001 year</span>
        　　<h4>第一個幻燈片</h4>
　　　　　<div class="con">
　　　　　　this is 2001
　　　　　</div>
　　　　　<div class="more">
　　　　　　　<a class="prev">previous</a>
　　　　　　　<a class="next">next 2000</a>
　　　　　</div>
　　　　　</div>
　　　　　<div class="right">
　　　　　<div class="img-box">
　　　　　　　<img src="1.img">
　　　　　</div>
　　　　　</div>
　　　　　</div>
</li>
<li>
<div class="grid">
        <div class="left">
        　　<span>2003 year</span>
        　　<h4>第一個幻燈片</h4>
　　　　　<div class="con">
　　　　　　this is 2003
　　　　　</div>
　　　　　<div class="more">
　　　　　　　<a class="prev">previous</a>
　　　　　　　<a class="next">next 2000</a>
　　　　　</div>
　　　　　</div>
　　　　　<div class="right">
　　　　　<div class="img-box">
　　　　　　　<img src="1.img">
　　　　　</div>
　　　　　</div>
　　　　　</div>
</li>

　　</ol>
</div>       

<!-- JS: -->

<script>
$('.box ol').slick({
// autoplay: true,
pauseOnHover: false,
speed: 1500,
autoplaySpeed: 5000,
slidesToShow: 1,
swipeToSlide: true,
touchThreshold: 100,
centerMode: true,
centerPadding: '0',
prevArrow: $('.box .left .more a.prev'),
nextArrow: $('.box .left .more a.next'),
});

$('.list .time').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var i = (nextSlide ? nextSlide : 0) + 1;
$(".list .small").text(i + '/' + slick.slideCount);
$('.box ol').slick('slickGoTo', nextSlide);
});
</script>

效果圖：

 

 

方法	對象	說明
slickGoTo	int : slide number	按索引導航到幻燈片

 

 

 

點擊列表元素獲得對應Index給幻燈片，使切換到對應的幻燈片（.list ul li是列表，.box ol 是幻燈片）

$(".list ul li").click(function() {
        $('.box ol').slick('slickGoTo', $(this).index());
        $(this).addClass('active').siblings().removeClass('active');
    });