5-1. 運用外掛 Slider
認識網頁上動態效的外掛（plugin）歸納外掛的使用步驟
認識網頁上動態效的外掛（plugin）
網頁上動態效果的外掛(plugin)，在15年前開始大多以 jQuery 製作，所以稱為 jQuery plugin。
近年來改良新製的外掛或許不以 jQuery 製作，而以 JavaScript 製作，也稱為 HTML5 plugin。
歸納外掛的使用步驟
不論原設計者的解說如何，依循以下三大步驟5小步驟，應該皆能完成外掛的套用。
(一)瀏覽器搜尋外掛 => 檢視 Example / Demos
(二)下載外掛程式 → 解壓縮 ／ 或是由網站介紹中 copy from CDN 的程式碼
(三)網頁內設計步驟 (How to use) -------------- 點選網站中 usage 按鈕可以查看說明
１、處理或拷貝相關的 HTML 標籤語法
２、連結相關的 CSS 檔案到 </head> 的前面 (建議放在自己的CSS檔案前)
３、載入相關的 JS 檔案到 </body> 的前面 (有些外掛也可以放在 </head> 的前面)
４、在 <script> </script> 標籤之中，將網頁元素物件依作者指示交給外掛程式。
５、如有需要再加上 option 選項設定，如有需要再修改 CSS 樣式設定。
Swiper - The Most Modern Mobile Touch Slider
Swiper 網站 Swiper 網站首頁 Demos 瀏覽 Getting Started 開始使用 Core / API 說明文件
TS：建議參考 Demo => Preview => 右鍵 => 檢視網頁原始碼 => 參考 HTML、CSS、JavaScript
TS： Demo: 完整標準版（Navigation、Pagination可按、loop） Demo: Autoplay自動輪播
TS： Demo: Responsive breakpoints依斷點RWD呈現多張縮圖
TS： Demo: Vertical垂直滑動 Demo: Mousewheel control滑鼠滾輪垂直滑動
TS： Demo: Effect cube立體方塊旋轉 Demo: Effect coverflow立體場景傾斜旋轉 Demo: Effect flip翻轉 Demo: Effect cards卡片抽換 Demo: Effect creative卡片抽換
TS： Demo: Effect fade淡入淡出 Demo: Thumbs gallery loop縮圖展現大圖 Demo: Parallax圖文視差滑動
Slick Slider
Slick 網站 Slick 網站首頁 Demos 瀏覽 get it now 下載
TS：參考 usage 如何使用 也可依 TS 歸納 How to use 的 5 個小步驟來安排，再參考 Demos 來調整
TS：最後還可參考 Settings 選項設定 還有更多的設定可以調整改變呈現的效果
bxSlider