好用的插件: Swiper 圖片滑動輪播 I

3 min readJul 13, 2020

--

第一部-環境建立

每次逛網拍的時候，都會看到首頁上有推薦商品的廣告圖片咻咻咻~滑過去!這樣的設計不但能提升產品曝光率，頁面呈現也很美觀。這種效果很常被使用在banner的設計呢。讓我們幫網頁添增一些生動感吧! 🙌

這邊介紹的插件是 Swiper 網址

step 1. 到首頁點擊進入Get Started

step 2. 插入CDN

Swiper有提供很多載入方式這邊選擇最便利的 CDN。

# 會發現link & script 各有兩支，其實內容是相同的，各選一支插入即可。差別在於min是壓縮檔。

寫法: 將 link 內容複製(紅色框框)，貼到html的<head>裡 ; 將 script 內容複製(藍色框框)，貼到<body>裡。

step 3. Layout 佈局

將紅框內容全部複製，貼到html。

# pagination 分頁(小圓點) ; navigation buttons 導航按鈕(左、右箭頭) ; scrollbar滾動條

將綠框內容全部複製，貼到CSS。

寬、高可依圖片修改

將紫框內容全部複製，貼到JavaScript。

最後再將圖片放進去，就可以得到下面的效果。

圖片來源<https://pixabay.com>

step 4. 設定效果

在JS修改一些參數，來呈現不同的效果。

direction 圖片播放方向 : vertical (垂直) 或 horizontal (水平)。

loop 循環播放 : true 循環或 false 不循環。

想知道更多效果調整? 接續閱讀 👉 第二部 -參數調整

好用的插件: Swiper 圖片滑動輪播 II

第二部 -參數調整

medium.com

資料來源: Swiper網站

Written by Logan Luo

理財、滑雪、程式 / 分享我知道的事。每天都比昨天進步一點!

No responses yet

Help
Status
About
Careers
Press
Blog
Privacy
Terms
Text to speech
Teams