---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day26 - Swiper 輪播套件"
tags: [軟體工程師體驗營 - 2023]

---

---
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)|
