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

　　雖然Bootstrap內建就有圖片輪播系統，不但設定簡單，也完全無需寫任何的javascript，只需依照Bootstrap的圖片輪播的HTML建製，立即就可完成圖片輪播的效果，同時也支援RWD自適應的效果，算是一個相當簡便的圖片輪播系統，但最大的缺點就是在手機裝置下，是不支援手勢左右滾動，就得按左右鍵，或是再套用iScroll的套件，才能讓Bootstrap的圖片輪播，支援手勢滑動切換上下張的效果，除此之外還有另一個題則是，當今天若廣告版面是比扁長的，當在手機底下瀏覽時，就會成細細一條，完全看不出是圖片輪播系統。

　　為了解決這問題，梅干找了許多關於圖片輪播的套件，試用了多款後，發現Slick Carousel最為簡單好用，其設定就跟Bootstrap差不多，但最大的差別就在於，Slick除了支援手勢滑動外，還可針對不同的解析度，設定不同的顯示筆數，比方說在電腦版，一次顯示四個，到了平板變二個，手機則是一個，如此一來才不會因為等比縮後，圖片變得扁長，完全看不出是什麼東西，同時Slick的官網中也有詳盡的說明與用法，現在干就帶大家一同來看，Slick這個好用的圖片輪播系統，要怎麼使用。

---

Slick Carousel

---

Step1
當進到Slick的網站後，可看到除了可手動建製外，也有專為WordPress打造的套件，這時先點上方的「usage」選項。

---

Step2
首先，當要使用Slick套件，不外乎就是引用Slick的css與js。

---

Step3
而這就是Slick基本的樣版。

---

Step4
當把輪播的HTML標籤建立後，接下來就是要設定的效果，這時就可到「Demos」選項下，在每個範例下方，都會看到相關的設定參數，這時只需將此參數拷貝，放到script的標籤中間可以了。

---

Step5
這個圖片輪播最讓梅干感到神奇的是，可依照螢幕大小，來控制圖片輪播的顯示數量，接下來梅干就簡單的來示範例一下，Slick的圖片輪播效果。

---

#基本圖片輪播－範例

---

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