--- tags: 軟體工程師體驗營 - 2024 --- # 🏅 切版任務 Day26 - Swiper 輪播套件 ### Swiper.js 這是一個 JS 的輪播套件，載入套件，撰寫基本 HTML 結構、JS 設定，即可製作出簡易的輪播效果，大家可以嘗試運用看看。 從 [Get Started 頁面](https://swiperjs.com/get-started/) 就可以看到要使用此套件有哪些引入方法，這邊我們就先嘗試使用 [CDN](https://swiperjs.com/get-started#use-swiper-from-cdn) 載入。 ![](https://imgur.com/GUmSL7u.png) ```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) ```htmlembeded= <!-- 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> ``` > 最外層以 div `.swiper` 包覆，是整個 swiper 的容器 > swiper 的內容都放在 `.swiper-wrapper` 中，每個 swiper-slide 是一個輪播項目 > 下方 pagination 分頁、navigation buttons 左右箭頭按鈕、scrollbar 滾動條，視需求加入 > 2. [初始化設定](https://swiperjs.com/get-started#swiper-css-styles-size) 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) 接下來可以嘗試觀看 [Parameters](https://swiperjs.com/swiper-api#parameters)、[Modules](https://swiperjs.com/swiper-api#parameters)，自行調整看看相關設定 ## 題目 修改上述[範例](https://codepen.io/jmimiding4104/pen/MWdjgjO)，使其滿足以下條件： - 移除滾動條與左右箭頭 - 一次可以看到三個 swiper-slide（提示：`slidesPerView`） - 底部分頁按鈕可以點選切換（提示：pagination `clickable`） - 一頁切換三個 swiper-slide（提示：`slidesPerGroup`） - swiper-slide 左右間距為 24px（提示：`spaceBetween`） **除了第一點外，其餘只需修改 JS 區塊** 示意圖： ![](https://hackmd.io/_uploads/rkXis2bLn.gif) ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： https://codepen.io/jmimiding4104/pen/GRajKqg --> 回報區 --- | 報數 | Discord 名字 | Codepen／其他回饋 | |:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:| | 1 |詹姆士|[Codepen](https://codepen.io/z111048/pen/abrpwXe?editors=1010)| | 2 | Meng | [Codepen](https://codepen.io/menglin1203/pen/ExzZXrB) | 3 | zaoannihao |[Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/pomRwmx?editors=1010)| | 4 | s870012 |[Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/KKLavgJ)| | 5 | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/XWwpaKr) | | 6 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/QWRdMmo) | | 7 | Emma | [Codepen](https://codepen.io/huang_L/pen/MWdJEay) | | 8 | Chia Pin | [Codepen](https://codepen.io/joker-cat/pen/vYwgejP) | | 9 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/WNBRZqo) | | 10 | JY | [Codepen](https://codepen.io/jylee0805/pen/GRarEVE?editors=1000) | | 11 | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/MWdJvRw) | | 12 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/BaepJQx)| | 13 | peggy |[Codepen](https://codepen.io/peggy0419/pen/dyENJKz)| | 14 | macihuang |[Codepen](https://codepen.io/macy1215/pen/wvbgyBZ)| | 15 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/YzbNEBW?editors=1010) | | 16 | easonpan |[Codepen](https://codepen.io/easonpan0904/pen/pomRLLV)| | 17 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/gOJgzqj)| | 18 | Antonio |[Codepen](https://codepen.io/gwhvusel-the-builder/pen/LYoxrzm)| | 19 | KUN. | [Codepen](https://codepen.io/barry91205/pen/NWVdzMG) | | 20 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/WNBRyVo) | | 21 | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/PovWdRe) | | 22 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/eYagoVO) | | 23 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/qBGRGaV) | | 24 | maruko | [Codepen](https://codepen.io/marukox1105/pen/gOJmoxG) | | 25 | kawa | [Codepen](https://codepen.io/z83xji6/pen/JjqWqmM?editors=1010) | | 26 | boin | [Codepen](https://codepen.io/boinji/pen/jOoBoqj) | | 27 | Zander | [Codepen](https://codepen.io/chuangmaster/pen/vYwxaEP) | | 28 | WEIWEI | [Codepen](https://codepen.io/weiwei93/pen/oNRWZQL?editors=1010) | | 29 | LYC | [Codepen](https://codepen.io/LY-C/pen/xxNdpmG) | | 30 | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/OJYgxmZ) | | 31 | Shen | [Codepen](https://codepen.io/yan-Shen-the-decoder/pen/wvbqjWM) | | 32 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/eYaGBja) | | 33 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/xxNXyNw) | | 34 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/gOJXVYd?editors=0110) | | 35 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/pompKvR) | | 36 | Yini Chen | [Codepen](https://codepen.io/CYini/pen/oNREreg) | | 37 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/vYwVQVr) | | 38 | hao jing | [Codepen](https://codepen.io/hjxu/pen/yLWvbpo?editors=1010) |