---
# System prepended metadata

title: "\U0001F3C5 Day 32 - Swiper 客製化樣式（實作第六週 - 職旅故事區塊）"
tags: [網頁切版直播班 - 2025 夏季]

---

# 🏅 Day 32 - Swiper 客製化樣式（實作第六週 - 職旅故事區塊）

接續前一天 [Day 31 - Swiper 輪播套件介紹](https://hackmd.io/viDcVI2rTwahWU38NTo0WQ) 的作業內容，實作第六週作業中「職旅故事」區塊，以及 Swiper RWD 設定
![image](https://hackmd.io/_uploads/H1byKqaVlg.png)


>圖片內容可以做重複的設定，最少要達五張。

Swiper 提供了 breakpoints 屬性讓我們能夠快速調整不同斷點下的排版，要留意的一點是 Swiper RWD 與 Bootstrap 相同，也是使用 Mobile First 的設計模式，可參考[官方文件](https://swiperjs.com/swiper-api#param-breakpoints)了解具體作法。

### 題目
可以完整自製一個內容，或者參考此[模板](https://codepen.io/fhljksmg-the-styleful/pen/emNXMwN?editors=1010)完成內容需要修改的部分。

作業提示：
1. 手機板時，需為單欄排版(1.1)、16px 間距
2. 斷點 768px 以上時，需改為雙欄排版(2.5)、24px 間距



## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/yyNwvdq?editors=1010
 -->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
|  01  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/VYvmPeB) |
|  02  |  登登登  |[Codepen](https://codepen.io/Duncanin/pen/pvjNRdR) |
|  03  |  Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/raOWjMm)|
|  04  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/raOWjqJ) |
|  05  |  Nooooora  |[Codepen](https://codepen.io/Nora-Ch/pen/ogjYeWv?editors=1010) |
|  06  |  7lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/ByoQmGo?editors=1010) |
|  07  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/MYabrLZ) |
|  08  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/wBKopZp) |
|  09  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/vENyjYB?editors=1010) |
|  10  |  地瓜  |[Codepen](https://codepen.io/ChippyYU/pen/zxvojOL) |
|  11  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/gbaLzYp) |
|  12  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/dPYOJBX) |
|  13  | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/zxvoePv)|
|  14  | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/bNVBzQz)|
|  15  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/RNWozKq?editors=1010) |
|  16  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/myeRypV) |
|  17  |  suemma  |[Codepen](https://codepen.io/suemma/pen/KwdaVGo?editors=1010) |
|  18  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/bNVBLQZ?editors=1010) |
|  19  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/xbwgYYZ?editors=1010) |
|  20  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/myeWbgp?editors=1010) |
|  21  |  KOMATSU PEI  |[Codepen](https://codepen.io/Komatsu2021/pen/OPygVvW) |
|  22  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=PwPjOVa) |
|  23  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/bNVrNPN) |
|  24  |  Hao  |[Codepen](https://codepen.io/Howell/pen/KwdXbGO) |
|  25  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/XJmZWzV) |
|  26 |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/jEbepNw) |
|  27 |  Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/dPYwvoo) |
|  28  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/bNVyELp) |
|  29  |  NGNLzenos  |[Codepen](https://codepen.io/hzpjunua-the-bashful/pen/ByjjVYJ) |
|  30  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/QwNLgJL?editors=1010) |


<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen](連結) | -->