網頁設計, 網頁資源

[套件] Slick Carousel支援手勢左右滑動,與RWD圖片輪播系統

梅干2018/04/03
梅問題-[套件]Slick Carousel支援手勢左右滑動,與RWD圖片輪播系統
  雖然Bootstrap內建就有圖片輪播系統,不但設定簡單,也完全無需寫任何的javascript,只需依照Bootstrap的圖片輪播的HTML建製,立即就可完成圖片輪播的效果,同時也支援RWD自適應的效果,算是一個相當簡便的圖片輪播系統,但最大的缺點就是在手機裝置下,是不支援手勢左右滾動,就得按左右鍵,或是再套用iScroll的套件,才能讓Bootstrap的圖片輪播,支援手勢滑動切換上下張的效果,除此之外還有另一個題則是,當今天若廣告版面是比扁長的,當在手機底下瀏覽時,就會成細細一條,完全看不出是圖片輪播系統。
  為了解決這問題,梅干找了許多關於圖片輪播的套件,試用了多款後,發現Slick Carousel最為簡單好用,其設定就跟Bootstrap差不多,但最大的差別就在於,Slick除了支援手勢滑動外,還可針對不同的解析度,設定不同的顯示筆數,比方說在電腦版,一次顯示四個,到了平板變二個,手機則是一個,如此一來才不會因為等比縮後,圖片變得扁長,完全看不出是什麼東西,同時Slick的官網中也有詳盡的說明與用法,現在干就帶大家一同來看,Slick這個好用的圖片輪播系統,要怎麼使用。
Slick Carousel
套件名稱:Slick Carousel
套件網址:http://kenwheeler.github.io/slick/

Step1
當進到Slick的網站後,可看到除了可手動建製外,也有專為WordPress打造的套件,這時先點上方的「usage」選項。
梅問題-[套件]Slick Carousel支援手勢左右滑動,與RWD圖片輪播系統
Step2
首先,當要使用Slick套件,不外乎就是引用Slick的css與js。
梅問題-[套件]Slick Carousel支援手勢左右滑動,與RWD圖片輪播系統
Step3
而這就是Slick基本的樣版。
梅問題-[套件]Slick Carousel支援手勢左右滑動,與RWD圖片輪播系統
Step4
當把輪播的HTML標籤建立後,接下來就是要設定的效果,這時就可到「Demos」選項下,在每個範例下方,都會看到相關的設定參數,這時只需將此參數拷貝,放到script的標籤中間可以了。
梅問題-[套件]Slick Carousel支援手勢左右滑動,與RWD圖片輪播系統
Step5
這個圖片輪播最讓梅干感到神奇的是,可依照螢幕大小,來控制圖片輪播的顯示數量,接下來梅干就簡單的來示範例一下,Slick的圖片輪播效果。
梅問題-[套件]Slick Carousel支援手勢左右滑動,與RWD圖片輪播系統
#基本圖片輪播-範例

#RWD自動調整顯示數量-範例