### 題目 今天要來實作第八週首頁電腦版「使用分享」區塊， 運用 Swiper 套件嘗試客製化 [scrollbar](https://swiperjs.com/swiper-api#scrollbar) 樣式吧！ ![](https://hackmd.io/_uploads/HJ_Bqj23n.png) HTML： ```htmlembedded= <div class="container text-white mt-3"> <h2 class="mb-3">使用分享</h2> </div> <div class="overflow-hidden"> <div class="container"> <div class="swiper"> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide shareCard bg-primary-dark text-white"> <p> ALPHABOX+ 真的很夯！每次把它打開，感覺就像是身臨其境一樣。它陪我度過了很多寂寞的時光，讓我在家裡也能享受到優質的休閒時光。 </p> </div> <div class="swiper-slide shareCard bg-white"> <p> ALPHABOX+ 真的很夯！每次把它打開，感覺就像是身臨其境一樣。它陪我度過了很多寂寞的時光，讓我在家裡也能享受到優質的休閒時光。 </p> </div> <div class="swiper-slide shareCard bg-primary-dark text-white"> <p> ALPHABOX+ 真的很夯！每次把它打開，感覺就像是身臨其境一樣。它陪我度過了很多寂寞的時光，讓我在家裡也能享受到優質的休閒時光。 </p> </div> <div class="swiper-slide shareCard bg-white"> <p> ALPHABOX+ 真的很夯！每次把它打開，感覺就像是身臨其境一樣。它陪我度過了很多寂寞的時光，讓我在家裡也能享受到優質的休閒時光。 </p> </div> </div> </div> <!-- Scrollbar --> <div class="row align-items-center mt-5"> <div class="col-8"> <!-- 加上 position-static 將滾動條的絕對定位設定覆蓋 --> <div class="swiper-scrollbar position-static"></div> </div> <div class="col-1"> <p class="mb-0 text-white">SCROLL</p> </div> </div> </div> </div> ``` CSS： ```css= body { background-color: #28085C; } .bg-primary-dark { background-color: #380C7E; } .shareCard { padding: 40px; } .swiper { overflow: initial; } /* 滾動條可拖曳區塊的顏色 */ .swiper-scrollbar-drag { background-color: ...; } /* 整個滾動條的背景顏色 */ .swiper-scrollbar { background-color: ...; } ``` JS： ```javascript= const swiper = new Swiper('.swiper', { // slide 間距 spaceBetween: ..., slidesPerView: 3, // Scrollbar scrollbar: { ... }, // 使 swiper 可以使用滑鼠滾輪捲動 mousewheel: true, }); ``` > 可以嘗試自行製作， > 也可以參考上方簡易模板（需自行調整 CSS、JS 區塊 `...` 的部分） > 記得載入 [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links)、[Swiper](https://swiperjs.com/get-started#use-swiper-from-cdn) CDN ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： https://codepen.io/hexschool/pen/oNJvZag --> 回報區 --- |#| Discord | CodePen / 答案 | |:-:|:--------------:|:-----------------------------------------------------------------:| | 01 |kuanju27|[Codepen](https://codepen.io/Eero-Chiao/pen/MWZymEb) | 02 | m_m | [Codepen](https://codepen.io/minnn7716/pen/RwEaVLE) | | 03 | shcpoy | [Codepen](https://codepen.io/shcopy/pen/qBLZmPo) | | 04 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/MWZymOb) | | 05 | Berlin | [Codepen]( https://codepen.io/3qberlin/pen/vYvGmdv) | | 06 |pinyi_9|[Codepen](https://codepen.io/Wpypy/pen/eYbZWMW) | 07 | Michelle0417#3569 | [Codepen](https://codepen.io/michelle0417/pen/WNLvxdL) | | 08 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/yLGObvV) | | 09 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/QWzNvZE) | | 10 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/JjwXNOp) | | 11 | ryan_chou | [Codepen](https://codepen.io/csw8524/pen/NWeNjoN) | | 12 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/qBLZmxY) | | 13 | townyuan | [Codepen](https://codepen.io/townyuan/pen/bGOpWJE) | | 14 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/GRPZmVK?editors=0110) | | 15 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/LYMNyJJ) | | 16 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/poqywzw?editors=1100) | | 17 | Moreene |[CodePen](https://codepen.io/Moreene/pen/bGOpRgg)| | 18 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/poqywpa) | | 19 | .icesam | [Codepen](https://codepen.io/icesam/pen/JjwXJmg) | | 20 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/LYMNjgy) | | 21 | Uli | [Codepen](https://codepen.io/uli1313/pen/YzdqrYJ) | | 22 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/qBLZXEd) | | 23 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/bGOpoxd) | | 24 | SmallP | [Codepen](https://codepen.io/smallp/pen/ZEVWyWr) | | 25 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/mdaPqQr) | | 26 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/MWZyrvd) | | 27 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/NWeNMBE) | | 28 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/oNJxybp?editors=1010) | | 29 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/ZEVWjPq) | | 30 | jiayu | [codepen](https://codepen.io/fjqxaznl-the-reactor/pen/gOZrdVj) | | 31 | orias_000 | [codepen](https://codepen.io/qoq77416416/pen/YzdqgZm) | | 32 | hannahTW | [codepen](https://codepen.io/hangineer/pen/dywMmor) | | 33 | soniawu | [codepen](https://codepen.io/YUJOU/pen/ZEVOKyW) | | 34 | runweiting | [Codepen](https://codepen.io/weiting14/pen/eYbzyNQ) | | 35 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/bGOemYJ) | | 36 | curalin | [Codepen](https://codepen.io/curalin/pen/QWzKOME) | | 37 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/YzdGYyz) | | 38 | Renee Wang | [Codepen](https://codepen.io/Renee-Wang-2022/pen/abPmRqm) | | 39 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/xxmgVWw) | | 40 | Long | [Codepen](https://codepen.io/Loonng/pen/bGOqaXg) | | 41 | wind | [Codepen](https://codepen.io/wind7y/pen/BavRNEm) | | 42 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/mdamvVb) | | 43 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/xxmXzGd) | | 44 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/bGOLXrg) | | 45 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/jOXzjMo) | <!-- 快速複製 | 00 | user | [Codepen]() | -->