-
#jennifer.juan
- 4 月 4
- CSS, JAVASCRIPT, Tools
jQuery插件有百百款，但並不是每個都提供完善的使用機制，
這裏為各位挑選幾款好看又好用的slider插件，它們都：
配合自適應（Responsive friendly）
配合觸控手勢（Mobile friendly）
有完善的文檔（documentation）
而且目前仍被活躍的開發中（on Github！）
Slick
檔案輕薄、可以針對不同breakpoint分開設定、跨瀏覽器測試（IE8+）、很快速能夠上手！
目前看過使用起來最簡便的slider plugin，只需要設定一個class就能在js設定所有功能。還提供原始版本（w/o slick-theme.css）與設計過介面後的版本挑選，方便設計師使用。
See the Pen slick by jennifer.juan (@jennifer-juan) on CodePen.
OwlCarousel
檔案輕薄、可以針對不同breakpoint分開設定、支援播放影片、跨瀏覽器與裝置測試（IE7/8/10/11）
flexslider
開發歷史豐富的插件，最後還被woocomerce買走。檔案輕薄、跨瀏覽器與裝置測試（IE7+）、能快速上手。
但小編使用的感覺，似乎自從賣給woo之後就有不少地方沒有被更新或是整理。官方各個平台的資訊不太一致（像是touch swipe的功能到底有沒有就讓我找了一陣子），雖然是強大很久的插件，但若沒有非常用心管理，加上舊插件的UI、UX介面也容易跟不上新的潮流，客官們可以慎選一下囉！
See the Pen WjwxJv by jennifer.juan (@jennifer-juan) on CodePen.
Swiper
可以設定的樣式非常豐富，可以多列顯示、3D過場效果、視差效果、放大顯示…。
功能多元華麗因此檔案沒有前幾個輕巧，也相對的要先設定很多基礎才能完成一份可用的slider。
使用Swiper製作前也要注意，它並不專注於測試與打造各種瀏覽器或平台的相容性。
See the Pen Swiper by jennifer.juan (@jennifer-juan) on CodePen.