slick- 好用的圖片輪播套件,也支援手機手勢及 RWD

分享:

slick 是一個很好用的圖片輪播套件,還號稱是 the last carousel you'll ever need,我個人也覺得是很棒,支援 RWD 也支援手機手勢,這樣不管在任何裝置上都可以正常操作。

 

基本上這也是 jQuery 的套件,所以一樣要先把 jQuery 讀進來。

再來透過 cdn 讀入:

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

 

基本用法如下,指定要使用的區塊即可:

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

 

更多的設定集範例說明可以看官網的文件。

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。