# 🏅 Day 31 - Swiper 輪播套件介紹 ### 一、Swiper 套件介紹 [Swiper](https://swiperjs.com/) 這是一個 JS 的輪播套件，載入套件，撰寫基本 HTML 結構、JS 設定，即可製作出簡易的輪播效果，今天我們就透過操作一些參數認識這個套件吧 ~ 從 [Get Started 頁面](https://swiperjs.com/get-started/) 可以依據自己的需要選擇引入的方式，因為我們目前是使用 CodePen 練習，所以我們是以 CDN 的方式導入 官方提供的 [CDN](https://swiperjs.com/get-started#use-swiper-from-cdn) ☟ ```htmlembedded= <!-- 貼到 <head> 內 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" /> <!-- 貼到 </body> 之前 --> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> ``` > 使用 Codepen 可以直接將 `href`、`src` 內連結分別貼至 Settings CSS、JS 區塊「Add External Stylesheets/Pens」內（詳細可以再觀看下方範例） 接下來了解基本使用方式： 1. 基本的 [HTML 架構](https://swiperjs.com/get-started#add-swiper-html-layout) > 最外層以 div `.swiper` 包覆，是整個 swiper 的容器 > swiper 的內容都放在 `.swiper-wrapper` 中，每個 `.swiper-slide` 是一個輪播項目 > 下方 pagination 分頁、navigation buttons 左右箭頭按鈕、scrollbar 滾動條，可依據需求增減 ```htmlembedded= <!-- Slider main container --> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> ... </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div> ``` 2. [初始化設定](https://swiperjs.com/get-started#swiper-css-stylessize) **CSS：** 如果沒有特別需要限制 swiper 的範圍，可以不需設定，使其自適應即可 ```css= .swiper { width: ...; height: ...; } ``` **JS：** 運用 `new Swiper()` 建立 swiper 實體， `new Swiper()` 有兩個參數： - 第一個參數為字串，需填入欲套用輪播效果的 swiper 容器，以上述基本結構為例，swiper 容器為 `.swiper` - 第二個參數為物件，非必填，可以填入想調整的選項 ```javascript= const swiper = new Swiper('.swiper', { // 分頁、左右箭頭、滾動條若有使用則必需設定 // 分頁 pagination: { el: '.swiper-pagination', }, // 左右箭頭 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 滾動條 scrollbar: { el: '.swiper-scrollbar', }, }); ``` 此時就可以簡單呈現出一個輪播效果摟！觀看 [範例](https://codepen.io/hexschool/pen/KKGYjGN) 若想要進一步取得更個別化的畫面與功能，可以閱讀[這裡](https://swiperjs.com/swiper-api#parameters)，其中有相關功能的參數可以設定參考。 另外也可以在 [DEMO](https://swiperjs.com/demos) 的部分尋找預期中的模板，再點擊 Core 後就能複製內容的程式碼，並依據需求做調整哦。 ### 題目 接下來我們就實際練習看看： 請透過設定參數將此 [Default](https://swiperjs.com/demos#default) ☟ ![image](https://hackmd.io/_uploads/Skh1p3Zj0.png) <br> 設定為以下的樣式 ☟ ![image](https://hackmd.io/_uploads/ByFaF_6Vxl.png) > 間距調整為 24px > 至少呈現五格照片，此三張圖片可以重複使用。 **圖片的位置** ```htmlembedded= <img src="https://github.com/0404kai/2025-layout-img/blob/main/week6/img.png?raw=true" alt="圖片1"> <img src="https://github.com/0404kai/2025-layout-img/blob/main/week6/image.png?raw=true" alt="圖片2"> <img src="https://github.com/0404kai/2025-layout-img/blob/main/week6/image-1.png?raw=true" alt="圖片3"> ``` 設定樣式提醒 ☟ > - 最外層使用 Bootstrap 中的 container > - 最上方有一個 h1 的標題文字「Swiper」 > `.container > (h1 + .swiper)` > - 由原本 一個畫面呈現一個 slide ☞ 一個畫面呈現三個 slide > - 會使用到三張圖片重複數次(至少五次)，每個 slide 間格 24px > > 因若對套件不熟悉會有一些操作上的困難，若有疑問可直接參考答案。 ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 參考答案： https://codepen.io/fhljksmg-the-styleful/pen/YPXgexm --> 回報區 --- |#|Discord|CodePen / 答案| |:----:|:----:|:----:| | 01 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/gbawqdQ) | | 02 | Nooooora | [codepen](https://codepen.io/Nora-Ch/pen/GgpjzyB)| | 03| Saika| [CodePen](https://codepen.io/saika4501/pen/ogjzmrd)| | 04 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/zxvKeWo)| | 05 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/XJmjGNe) | | 06 | Pastor |[Codepen](https://codepen.io/peter_hung/pen/LEpRamM) | | 07 | 7lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/NPGRmvX) | | 08 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/WbQGmYR) | | 09 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/XJmjQdy) | | 10 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/myergJV) | | 11 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/VYvKgMr)| | 12 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/pvjEXpe) | | 13 | Sam.S.T.Y |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/dPYpxKM) | | 14 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/raOWBxN) | | 15 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/XJmNrGp) | | 16 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/ByoQyGJ) | | 17 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/ByoQRbb) | | 18 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/KwdNvzy) | | 19 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/vENyNLQ) | | 20 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/RNWoxgr) | | 21 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/dPYOmjw) | | 22 | suemma |[Codepen](https://codepen.io/suemma/pen/YPyNwPb) | | 23 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/wBKgZva?editors=1000) | | 24 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/empvOpb) | | 25 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/KwdqwjW) | | 26 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=myeOdOg) | | 27 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/myeMdWW) | | 28 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/jEbGvmd) | | 29 | Hao |[Codepen](https://codepen.io/Howell/pen/empGPpB) | | 30 | 伊迪 |[Codepen](https://codepen.io/eku10rei/pen/wBKpOeK) | | 31 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/ZYbrKYd) | | 32 | Celia |[Codepen](https://codepen.io/Cindy-Ho/pen/zxvmaej) | 33 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/RNrNOpG) | 34 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/azvxYLJ) | 35 | cindy |[Codepen](https://codepen.io/a50134/pen/PwPMNVG) | | 36 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/dPMbRKJ) | <!-- 快速複製 --> <!-- | 排序 | 姓名 |[Codepen](連結) | -->