---
# System prepended metadata

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

---

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













