---
# System prepended metadata

title: "\U0001F3C5 Day 31 - Swiper 輪播套件介紹"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 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](連結) | -->