---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day27 - Swiper RWD 變換排版、CSS 樣式調整"
tags: [軟體工程師體驗營 - 2024]

---

---
tags: 軟體工程師體驗營 - 2024
---

# 🏅 切版任務 Day27 - Swiper RWD 變換排版、CSS 樣式調整
延續前一天，今天要來嘗試調整 Swiper 中的斷點設定並搭配 CSS，讓 Swiper 可以隨著瀏覽器寬度變換排版與樣式。

### 題目
根據下方提示，運用此[模板](https://codepen.io/hexschool/pen/LYoxXxv)調整 CSS、JS 中 `...` 的部分，讓 Swiper 可以符合設計稿中首頁下方的「精選文章」區塊

提示：
CSS：
1. 分頁按鈕定位調整，active 時顏色為黑色 `#000000` ，圓點左右間距為 16px，大小調整為 `12px * 12px` 
2. 「更多文章」按鈕電腦版時隱藏
3. 手機版時（768px 以下），從第 4 個 swiper-slide 開始之後隱藏（只留下 3 個）
4. 手機版時（768px 以下），分頁按鈕隱藏

JS：
1. 頁面寬度 `>= 768px` 時，（`breakpoints`）
  Swiper 一次可以看到三個 swiper-slide（`slidesPerView`）
  swiper-slide 左右間距為 24px（`spaceBetween`）
2. 手機版時，Swiper 排版為 3 列，頁面寬度 `>= 768px` 時，排版為 1 列（`grid rows`）
3. 分頁按鈕可點擊（`pagination clickable`）



>可參考 [Swiper 官方文件](https://swiperjs.com/swiper-api#parameters) 進行調整

## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

<!-- 

解答：
https://codepen.io/hexschool/pen/PovWyOv

-->


回報區
---

| 報數 | Discord 名字  |  Codepen／其他回饋                                                         |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 01 | s870012 |[Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/YzbNxer)|
| 02 | Michelle0417 |[Codepen](https://codepen.io/michelle0417/pen/WNBRBGe) |
| 03 | 毛巾 |[Codepen](https://codepen.io/bqdcjboa-the-solid/pen/OJYWYVr) |
| 04 | JUN_ |[Codepen](https://codepen.io/Jun-L/pen/yLWgdBX?editors=0110) |
| 05 | Chia Pin |[Codepen](https://codepen.io/joker-cat/pen/YzbNoyo) |
| 06 | Ariel |[Codepen](https://codepen.io/ariel0510/pen/WNBRqop) |
| 07 | easonpan |[Codepen](https://codepen.io/easonpan0904/pen/NWVdZow) |
| 08 | LYC |[Codepen](https://codepen.io/LY-C/pen/rNgjXKa) |
| 09 | KUN. |[Codepen](https://codepen.io/barry91205/pen/dyEvbeq) |
| 10 | peggy |[Codepen](https://codepen.io/peggy0419/pen/XWwMrNp) |
| 11 | Aya | [Codepen](https://codepen.io/NoNameNote/pen/wvbgbKZ) |
| 12 | Winnie | [Codepen](https://codepen.io/codepen-io-winnie/pen/OJYpJRM) |
| 13 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/dyEvYro) |
|  14  | Tough life | [Codepen](https://codepen.io/hakuei0115/pen/dyEvMOd) |
| 15 | macihuang | [Codepen](https://codepen.io/macy1215/pen/NWVppaB) |
|  16  | maruko1105 | [Codepen](https://codepen.io/marukox1105/pen/oNRZpdY) |
|  17  | JY | [Codepen](https://codepen.io/jylee0805/pen/KKLWzPO?editors=1000) |
|  18  | Hailey | [Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/jOoBebj) |
|  19  | kawa | [Codepen](https://codepen.io/z83xji6/pen/oNRZRVy) |
|  20  | Emma | [Codepen](https://codepen.io/huang_L/pen/jOoBjNq) |
|  21  | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/gOJmNjP) |
|  22  | Anais77 | [Codepen](https://codepen.io/liu-anais/pen/bGyRYdP) |
|  23  | oyll | [Codepen](https://codepen.io/dizzydog-rgb/pen/yLWzVRZ) |
|  24  | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/BaewGGb) |
|  25  | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/bGyYXYb) |
|  26  | Yini Chen | [Codepen](https://codepen.io/CYini/pen/zYQRVLV) |
|  27  | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/YzbaVQR) |
|  28  | hao jing | [Codepen](https://codepen.io/hjxu/pen/WNBmMjv) |
|  29  | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/QWRRWwN) |


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