# 🏅 Day 38 - Swiper 客製化樣式（實作第六週 - 精選文章區塊）

接續前一天 [Day 37 - Swiper 輪播套件介紹](https://hackmd.io/iUyXrm0dSN6ILfLdw1_A8w) 的作業內容，實作第六周作業中「精選文章」區塊

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

可以完整自製一個內容，或者參考此[模板](https://codepen.io/jmimiding4104/pen/xxowGQy)完成內容的需要填寫的內容。

1.畫面群組：參考官方文件加入 [群組(slidesPerGroup)](https://swiperjs.com/swiper-api#param-slidesPerGroup) 的功能。
>為什麼要加入群組呢？主要是當我們沒有使用到群組時，下方的 pagination 只能讀取到左邊方格的數量，因為我們整個版面容納兩個物件(當一次輪播一個 slide 時才無此問題)，故若目前物件有五項，但到底時僅能讀取到 4/5 便無法接下進行，故這邊加入群組的功能(不僅只有這個方法，若有其他想法歡迎嘗試看看喔)。

2.navigation：透過官方文件或者 Demo 內容，針對 navigation 的部分與 HTML 做連結，讓這個頁面能加入點擊按鈕換頁的功能。

3.pagination：透過官方文件或者 Demo 內容，針對 [pagination](https://swiperjs.com/swiper-api#pagination) 與 HTML 做連結，當變換物件內容後 pagination 也會連動更換。

以上內容可透過 [官方連結](https://swiperjs.com/get-started#initialize-swiper) ，了解更多做法。

## 回報流程

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


<!-- 解答：
https://codepen.io/jmimiding4104/pen/YzoPjqW
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/eYweKOa) |
|02|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/bGPYKdK)|
|03|tim|[Codepen](https://codepen.io/jskrtivy-the-animator/pen/rNEyQKB)|
| 04 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/gONXKGz) |
| 05 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/ZEdaRoY) |
| 06 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/dyBZjWq) |
| 07 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/PorOdwZ) |
| 08 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/bGPYxVg) |
| 09 | Discord | [Codepen](https://codepen.io/barry91205/pen/KKjyGwr) |
| 10 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/rNEYvQR) |
| 11 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/PorOgJb) |
| 12 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/yLdPrJp)|
| 13 | haojing |[Codepen](https://codepen.io/hjxu/pen/RwzxbQj)|
| 14 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/NWZXWjW)|
| 15 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/KKjZwZQ) |
| 16 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/BagmVZP) |
| 17 | Mars | [Codepen](https://codepen.io/MarsKuo/pen/GRbyoRR) |
| 18 | kawa | [Codepen](https://codepen.io/z83xji6/pen/eYwyZyO) |
| 19 | xcx100 | [Codepen](https://codepen.io/c13026/pen/rNEpWGB) |
| 20 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/gONoxzM) |
| 21 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/BagJwpY) |
| 22 | wind | [Codepen](https://codepen.io/wind7y/pen/gONovyK) |
| 23 | Mike | [Codepen](https://codepen.io/mike2049/pen/gONoyVg?editors=1100) |
| 24 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/JjQMzoW) |
| 25 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/WNqdWjR)|
| 26 | Glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/rNEdjxN) |
| 27 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/RwzMdWV) |
| 28 | Enn | [Codepen](https://codepen.io/enntang/pen/qBzYJNQ) |
| 29 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/rNEvRgV) |
| 30 | emmayo | [Codepen](https://codepen.io/emmayo/pen/poXKJKd) |
| 31 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/YzojyMN) |
| 32 | yoishere | [Codepen](https://codepen.io/jmimiding4104/pen/YzoPjqW) |
| 33 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/WNqYrdM) |
| 34 |Jainee| [Codepen](https://codepen.io/Jainee0110/pen/rNEbOBg) |
| 35 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/abgxmvW) |
| 36 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/rNEEYLZ?editors=1010) |
| 37 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/dyxooWX) |
| 38 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/yyLQdJg) |

<!--
| No | Discord | [Codepen]() |
-->