JS小分享｜Slide輪播套件
Published in
3 min readDec 13, 2018
Slide是一個非常常見的網頁功能，在這一個區塊上也有非常非常多編譯的相當完整的JS套件，除了特殊情況下有輪播套件做不到的事情需要靠自己編譯外，基本上Slide的製作上我都會選擇使用各個前端前輩的Slide套件~
在這裡我將介紹3種用了近乎百種套件後，已收編進我的最愛的3個Slide套件
這三種Slide都支援RWD效果，其中slick以及Slider Pro更支援了電腦版也可以使用滑鼠左右拖曳切換的功能，而這三種套件呈現方式都各有特色！
FlexSlider具有基本的圖片輪播效果，支援影片置入可以控制影片的播放暫停、選擇是否要顯示左右箭頭、圖片數量點、圖片縮圖。
網站的左手邊也有列出它的基本slide選擇，如果是單純的網頁可以使用各個套件即可！
slick除了FlexSlider的基本功能外，更多了直接新增、移除、判斷單雙數的功能，很適合一些會前後端拋接時會新增slide的動態網站
Slider Pro則比較偏向會有很多文案類型的slide，除了切換效果，也自備文字切換時的動態效果，網站上的範本其實就可以看的出來這個套件更適合一些需要大量文字敘述型的網站！
這3個套件的方向定位都各自有不同的特色，而三個套件都有共同的地方就是，如果一開始你是隱藏的框架，網站又同時有常駐的Slide需求，那麼就要小心使用了！
這裡也提出一個簡單的解決方案，就是使用JS+CSS來控制框架的隱藏顯示，用JS判斷框架的Class增加/移除，CSS的 opacity以及 pointer-events來控制隱藏及穿透！
希望上面的介紹可以幫助你加速選擇哪個套件的需求，我們下次再見吧~
