Swiper 這個 Plugin 最大的優勢是：有支援 RWD 響應式，針對手機去優化使用體驗，是目前兼容性最好的插件。
如何下載 Swiper
- 先在桌面上新增一個資料夾，叫做「swiper」，然後把資料夾拉到 sublime text 裡面
在 sublime text 新增一個 index.html 檔案，儲存在 swiper 資料夾
打開index.html，產生出html基本結構（用emmet熱鍵）
- 載入 Swiper 在遠端伺服器的 CDN （遠端的意思是，他已經把css和js放上去了）
❗️ 記得要把4.x.x 自己更換成Swiper的最新版本號（點擊右上角的"Swiper on cdnjs"可查詢最新版本號）
進入cdnjs後，搜尋swiper，可以看到目前的最新版本號為「4.5.0」
載入 Swiper 的 css 和 js 時，要注意：
[css]
❗️ css放在<head>裡面
❗️ css 的 CDN，只要載入".min"的即可
1 | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css"> |
上面這兩行 css 的 CDN，只要載入".min"的就可以了，那這兩個有什麼差別呢？
- swiper.min.css 是壓縮過的版本，把程式碼變成一行（沒有要讓你看懂的意思），好處是「程式碼檔案比較小」。所以，如果你的網頁是要上線的，建議是使用".min"的版本即可，這樣網頁下載速度會較快。
[javascript]
❗️ js 的 CDN，也只要載入".min"的即可
❗️ js 要放在</body>尾巴前面，原因為：網頁會從html的上面開始往下讀取，希望網頁先渲染出前面的結構後，後面的 javascript 在執行的時候，才可以讀取到已經渲染好的網頁結構，針對這些html標籤去執行效果，是有先後順序之分的
css和js放好之後如下圖：
- 把 Swiper 的 html 範例程式碼貼到我的 index.html 中，看看效果
❗️ html語法中，記得把這三個點點刪掉，三個點點只是要提醒你：如果要新增第四個、第五個 slide 的話，要加在這裡
-
把下面紅框中的css貼到自己的 all.css 中，來設定輪播視窗的寬高，之後也可以依需求調整
-
終於，要啟動 Swiper 了
- 作法一 [將 Swiper 的 js 放在自己的 index.html 裡面]
把下面這段 js 貼到 index.html 的 </body> 前面，就完成了！
❗️ 注意（先後順序很重要）這段js啟動碼要貼在「Swiper核心」的後面
原因為：要讓套件的核心js先載入完成後，再去執行效果的程式碼，否則會找不到 Swiper
- 作法二 [將 Swiper 的 js 整合到自己的 all.js 裡面]
把紅框處的 js （從 var…開始）貼到 all.js 中，就完成了！
Swiper js 語法解析
1 | <script> |
打開一個新的Swiper，選擇 .swiper-container 來做效果 （.swiper-container把整個輪播視窗給包起來）
在 swiper 中，scrollbar 不支援 loop 模式，可以看這篇