### 題目
今天要來實作第八週首頁電腦版「使用分享」區塊，
運用 Swiper 套件嘗試客製化 [scrollbar](https://swiperjs.com/swiper-api#scrollbar) 樣式吧！


HTML：

<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：

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：

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

-->