--- tags: 軟體工程師體驗營 - 2023 --- # 🏅 切版任務 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://hackmd.io/_uploads/BJHlwY-Lh.png) ```htmlembedded= <!-- 貼到 <head> 內 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" /> <!-- 貼到 </body> 之前 --> <script src="https://cdn.jsdelivr.net/npm/swiper@9/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/hexschool/pen/KKGYjGN)，使其滿足以下條件： - 移除滾動條與左右箭頭 - 一次可以看到三個 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/hexschool/pen/GRYLVOZ --> 回報區 --- | 報數 | Discord 名字 | Codepen／其他回饋 | |:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:| | 1 | 翔.#0859 | [Codepen](https://codepen.io/energy95272z/pen/NWOZYVW) | | 2 | Quantum#6093 | [Codepen](https://codepen.io/Min-Hao-Hung/pen/MWPMGjp) | | 3 | Snadra#1987 | [Codepen](https://codepen.io/mlqmhltg/pen/bGmPMgV) | | 4 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/wvYLjGB) | | 5 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWPMGmo) | | 6 | Kulimusoda#2785 | [Codepen](https://codepen.io/yuch3n_chen/pen/eYPwrRG) | | 7 | JimWang#6134 | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/rNqEvvd?editors=0010) | | 8 | 辣椒#1002 | [Codepen](https://codepen.io/chilichen118/pen/BaqgVap) | | 9 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/bGmPMOB) | | 10 | K（アギルダー）#0386 | [Codepen](https://codepen.io/klay376014/pen/GRYbGWN) | | 11 | Jacky7035#9423 | [Codepen](https://codepen.io/adens123/pen/VwEJdpv) | | 12 | 依依#6306 | [Codepen](https://codepen.io/Rita-Yang/pen/gOBNKQG?editors=1010) | 13 | ChaosTu#9311 | [Codepen](https://codepen.io/torotu/pen/ExdBpKK) | |14|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/PoyrBdX)| | 15 | Eero#1147 | [Codepen](https://codepen.io/Eero-Chiao/pen/QWZXBXb) | | 16 | Hao#2485 | [Codepen](https://codepen.io/Seanfeb16/pen/bGmPxed) | | 17 | 銀光菇#1692 | [Codepen](https://codepen.io/genesynthesis/pen/VwEJGzg) | | 18 | gahwa#3562 | [Codepen](https://codepen.io/gahwa17/pen/eYPwPNL) | | 19 | Kaya#8857 | [Codepen](https://codepen.io/laron9486/pen/bGmPxoE) | | 20 | jia yu#8896 | [Codepen](https://codepen.io/fjqxaznl-the-reactor/pen/YzJoJrq) | | 21 | Berlin#7338| [Codepen](https://codepen.io/3qberlin/pen/ExdBdKM) | | 22 | Akira#9996| [Codepen](https://codepen.io/Akira-Chen/pen/wvYLNjp) | | 23 | 浪裡小白龍#6860| [Codepen](https://codepen.io/Emillo/pen/rNqEPJR) | | 24 | Jennifer Chuang#3937| [Codepen](https://codepen.io/yujhen/pen/VwEJowB) | | 25 | Rayo#8002| [Codepen](https://codepen.io/loborayo/pen/abRgeKj) | | 26| wiimax#4564| [Codepen](https://codepen.io/willismax/pen/Jjmgdmo) | 27 | David0799#4415| [Codepen](https://codepen.io/David0799/pen/WNaVwyz) | | 28 | snow#0255 | [Codepen](https://codepen.io/snow21723/pen/VwEojBy) | | 29 | liam9930#4129 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/abReBMb) | | 30 | yoyo#1003 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/BaqXjEK) | 31 |Celia#1715 | [Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/WNaVgeV) | | 32 |姜承#8204 | [Codepen](https://codepen.io/Troy0718/pen/rNqXqyZ?editors=1010) | | 33 |HsuanTang#1349 | [Codepen](https://codepen.io/HsuanTang/pen/bGmXzRW) | | 34 | Ataraxia#9977 | [Codepen](https://codepen.io/ataraxia8888/pen/VwEoREM) | 35 | henrykgba#5749 | [Codepen](https://codepen.io/henrymorgan666/pen/dygxEXB) | | 36 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/WNYeyEp) | | 37 | youtown#0797 | [Codepen](https://codepen.io/youtown/pen/mdQbgEK) | | 38 | Janet#5784 | [Codepen](https://codepen.io/janetlinnn/pen/BaGaKvQ) | | 39 | Uli#1946 | [Codepen](https://codepen.io/uli1313/pen/vYQYRKL) | |40|肉個阿倫#7172|[Codepen](https://codepen.io/i9574385/pen/RwqPgZN)| |41|weiting#3489|[Codepen](https://codepen.io/weiting14/pen/JjeYWEP?editors=1010)| |42|兔子#6746|[Codepen](https://codepen.io/CarrotDetector/pen/OJayqRL)| |43|Ann Chou#0146|[Codepen](https://codepen.io/annchou_illu/pen/NWExQeX)| | 45 | 薇拉#8110 |[Codepen](https://codepen.io/michellecc0522/pen/JjeXjjJ?editors=1010)| | 46 | CMLB0212|[Codepen](https://codepen.io/Chungmin0212/pen/LYXZdby)| | 47 | PoWei#8484 |[Codepen](https://codepen.io/harrison-wei-lai/pen/YzRaQRV)| | 48 | betty#0693 |[Codepen](https://codepen.io/betty-hu/pen/LYXJxdX?editors=0010)| | 49 | FiReBrO#0557 |[Codepen](https://codepen.io/firebro42/pen/MWZgogw)|