---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 切版任務 Day25 - Swiper RWD 變換排版

## Swiper 的 JavaScript 基本設定說明

new Swiper('.swiper', {
  spaceBetween: 24,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  grid: {
    rows: 3,
    fill: 'row'
  },
  slidesPerView: 1,
  breakpoints: {
    768: {
      slidesPerView: 3,
      grid: {
        rows: 1
      },
      spaceBetween: 24
    }
  }
});

* `new Swiper('.swiper', { ... })` 這是創建 Swiper 實例的方式，.swiper 是目標元素的選擇器（也就是你 HTML 裡的 `<div class="swiper">`）
* `spaceBetween: 24` 是每個 slide 之間的「水平間距」，單位是像素。
* `navigation: { nextEl, prevEl }` 設定左右導航箭頭的元素。
* `grid: { rows: 3, fill: 'row' }` 這是使用 Swiper 的 多行顯示功能，表示每次有 3 列（行數），而不是預設的單一行。
* `slidesPerView: 1` 預設情況下，一次顯示 1 張 slide。
* `breakpoints` 這個設定用來定義 不同裝置寬度下的行為，像是響應式設計：

breakpoints: {
  768: {
    slidesPerView: 3,
    grid: {
      rows: 1
    },
    spaceBetween: 24
  }
}

這裡意思是螢幕寬度 ≥ 768px 時，套用以下設定：

* 一次顯示 3 張卡片（slide）
* 每張 slide 為單行（grid rows: 1）
* 卡片間距為 24px
* 這樣設計在桌機和手機上會有不同的排版方式。

更多的基本設定可以觀看 [Parameters](https://swiperjs.com/swiper-api#parameters)、[Modules](https://swiperjs.com/swiper-api#parameters)，自行調整看看相關設定。

---

### 題目
複製此 [CodePen 範例](https://codepen.io/yen-kg/pen/oggawXx)，調整 JS 中 `...` 的部分，讓 Swiper 完成以下條件

1. 頁面寬度 `>= 768px` 時，Swiper 一次可以看到三個 swiper-slide。
3. swiper-slide 左右間距為 24px。
4. 手機版時，Swiper 一只可以看到一個 swiper-slide。

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--

解答：
https://codepen.io/yen-kg/pen/wBBYeGm

-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/wBaKQKa) |
| 2 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/myJezov) |
|3|蛋殼|[Codepen](https://codepen.io/weybrian/pen/ZYGbmav)
| 4 | dean | [Codepen](https://codepen.io/ch933114/pen/gbppjym?editors=1010) |
| 5 | Aoi | [Codepen](https://codepen.io/zching07/pen/RNPWEjp) |
| 6 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/PwqPqNx) |
| 7 | NAOJUN | [Codepen](https://codepen.io/NAOJUN/pen/pvJjGLj) |
| 8 | nora_zizi | [Codepen](https://codepen.io/Nora-Ch/pen/LEVpMbV) |
| 9 | Hugh | [Codepen](https://codepen.io/Hugh-Chen/pen/KwpdLow) |
| 10 | 登登登 | [Codepen](https://codepen.io/Duncanin/pen/WbvQVZJ) |
| 11 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/RNPWqeP)|
| 12 | Holly | [Codepen](https://codepen.io/LEE-HOLLY/pen/xbGZbdK?editors=0110)|
| 13 | 謝天 | [Codepen](https://codepen.io/crisxie/pen/YPXwXRj) |
| 14 | Min | [Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/WbvrQxw) |
| 15 | zhe | [Codepen](https://codepen.io/dotheright/pen/emNJpxK) |
| 16 | allen3290 | [Codepen](https://codepen.io/udadkudw-the-looper/pen/YPXwWWB) |
| 17 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/zxGrLNP)|
| 18 | carrie0416 | [Codepen](https://codepen.io/Hong-Carrie/pen/GgJoXJo) |
| 19 | Tetsu | [Codepen](https://codepen.io/ttgchang/pen/pvJgBba) |
| 20 | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/KwpzVBe?editors=0100) |
| 21 | 力文 | [Codepen](https://codepen.io/liwenchiou/pen/pvJyymv) |
| 22 | tina01170 | [Codepen](https://codepen.io/tina-huang-the-bashful/pen/JodXOWM?editors=0110) |
| 23 | 7Lun | [Day25-Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/emNZPrY) |
| 24 | jingle0900 | [Codepen](https://codepen.io/EvaLi0472/pen/gbpMXpj) |
| 25 | An | [Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/jEPraWg?editors=1100) |
| 26 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/qEdNdpN) |
| 27 | Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/qEdrOOe) |
| 28 | William Hsieh | [Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/JodWRRE) |
| 29 | Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/JodJPjN) |
| 30 | Zhu | [Codepen](https://codepen.io/codepenplayer/pen/zxGdmjK) |
| 31 | 禹成林 | [Codepen](https://codepen.io/useirin/pen/OPVmxme) |
| 32 | Astrid | [6/8](https://codepen.io/astrid321654/pen/NPqaWoR) |
| 33 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/zxGpQpX) |
| 34 | mercury2508. | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/WbvzjGo) |
| 35 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/EajeZXL) |
| 36 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/dPogPMb) |
| 37 | JiaMori | [Codepen](https://codepen.io/jiamori/pen/LEVXdOQ) |

<!--
| num | user | [Codepen]() |
-->