---
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://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]() |
-->