相比于Swiper而選擇使用Slick.js的原因主要是因為其兼容不錯并且在手機端的滑動效果更順暢
參數：
1.基本使用：一般使用只需前十個屬性
$('.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, //顯示幾行，默認為 1vertical: false， //是否開啟垂直滑動模式verticalSwiping: false, //是否開啟垂直滑動切換});
2.輪播效果：
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',
});
3.將兩個序列關聯起來：（.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>
點擊列表元素獲得對應Index給幻燈片，使切換到對應的幻燈片（.list ul li是列表，.box ol 是幻燈片）
$(".list ul li").click(function() {$('.box ol').slick('slickGoTo', $(this).index());$(this).addClass('active').siblings().removeClass('active');});
)
)
