---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/13(五) 每日任務

### Swiper.js 介紹：

這是一個 JS 的輪播套件，雖然 Bootstrap 也有提供 [Carousel](https://getbootstrap.com/docs/4.5/components/carousel/) 可以使用，但是相較之下比較不彈性，所以改使用 Swiper.js ，也讓各位可以更熟悉其他第三方套件的使用方法。

從 [Get Started 頁面](https://swiperjs.com/get-started/) 就可以看到要使用此套件有哪些引入方法，這邊我們就先嘗試引用 CDN，可以看到 CSS 與 JS 各有兩種，差別在於一個有壓縮(.min)，另一個沒有壓縮，這邊可以擇一使用。

接下來可以直接到 [Demo 頁面](https://swiperjs.com/demos/) 搜尋我們想要引入的樣式，例如我選擇只要 Navigation 的樣式（透過左右按鈕切換輪播圖片）

點擊 [Open in new window](https://github.com/nolimits4web/Swiper/blob/master/demos/020-navigation.html) 就可以看到此樣式套用的程式碼，重點分別是
1. Link Swiper's CSS （引入 CSS CDN）
2. Demo styles （CSS 的部分，這邊可以斟酌使用）
3. Swiper （HTML 結構）
4. Swiper JS （引入 JS CDN）
5. Initialize Swiper （JS 初始化設定，這個概念和在使用 AOS 一樣都需要做初始化的設定）

> 以上就是通通複製到我們的專案就對了，位置放對大致上就能動了

如果想客製化一些設定可以再參考他的 [API 頁面](https://swiperjs.com/api/)

## 題目

試著使用 [Bootstrap Card 元件](https://getbootstrap.com/docs/5.0/components/card/) 搭配 [Swiper](https://swiperjs.com/demos/) 套件完成第六週版型的輪播，如圖：


要求：
* 卡片可以一個一個輪播
* 使用 [Slides per view 範例](https://swiperjs.com/demos#slides-per-view)

<div class="container">
  <div class="row">
    <div class="col-12 col-md-11 offset-md-1">
      <div class="swiper-container mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
           card 元件
          </div>
          <div class="swiper-slide">
           card 元件
          </div>
          <div class="swiper-slide">
           card 元件
          </div>
          <div class="swiper-slide">Slide 4</div>
          <div class="swiper-slide">Slide 5</div>
          <div class="swiper-slide">Slide 6</div>
          <div class="swiper-slide">Slide 7</div>
          <div class="swiper-slide">Slide 8</div>
          <div class="swiper-slide">Slide 9</div>
        </div>
      </div>
    </div>
  </div>
</div>

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  width: 100%;
  height: 350px;
}

var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
    spaceBetween: 30,
    breakpoints: {
      768:{
        slidesPerView: 3,
        spaceBetween: 30,
      },
    }
});

載入 CDN：

Swiper
* https://unpkg.com/swiper/swiper-bundle.min.css
* https://unpkg.com/swiper/swiper-bundle.min.js

Bootstrap
* https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css
* https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答： [Codepen 範例](https://codepen.io/hexschool/pen/bGqzMKJ) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/qBmjVJB
-->

<!-- 1. Alpha
Codepen:https://codepen.io/alphatero/pen/ZEKPyqb

-->

<!-- 2. 肉鬆
codepen: https://codepen.io/klrkicog/pen/ZEKPymb
-->

<!-- 3. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/xxdBrmd
-->

<!-- 4. lumei
codepen: https://codepen.io/l_umei/pen/bGWZrdX
-->

<!-- 5. Lina Chen
codepen: https://codepen.io/LinaChen/pen/GRmeEVw
-->

<!-- 6. Cate Chang
codepen: https://codepen.io/tutz/pen/PomLKGv
-->

<!-- 7. 雷古娜
https://codepen.io/tinahopo/pen/wvdOeRO -->

<!-- 8. 陳sam
https://codepen.io/euldpliv/pen/QWvoMGj
-->

<!-- 9. Gui
https://codepen.io/guitimliu/pen/YzVgxQR -->

<!-- 10. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/poPqpXK
-->

<!-- 11. 大衛
codepen:
https://codepen.io/exnsrpjc/pen/WNjmEJw
-->

<!-- 12. Gill
codepen:https://codepen.io/Gill-Chin/pen/WNjmELG?editors=1100
-->

<!-- 13. Sz
https://codepen.io/szyln/pen/PomLJZN
-->

<!-- 14. Jun Chan
codepen:https://codepen.io/chujunchan/pen/MWmxvmJ
-->

<!-- 15. huanan
codepen:https://codepen.io/hua_nan/pen/WNjmZEZ
-->

<!-- 16. peter.chen
codepen: https://codepen.io/JIAN-RONG/pen/XWRGeqG?editors=1100
-->

<!-- 17. axlrock1021
codepen: https://codepen.io/andy1021/pen/VwbRrjp
-->

<!-- 18. 魚魚
codepen: https://codepen.io/YuYu_29/pen/WNjmXxa
-->

<!-- 19. 沈依蓉
https://codepen.io/lily-oa/pen/eYWXeBO
-->

<!-- 20. Sec
https://images.unsplash.com/photo-1567722681579-c671cabd2810?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=334&q=80
-->

<!-- 21. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/WNpPzyJ?editors=1000
-->

<!-- 22. 阿和
codepen:https://codepen.io/shnny/pen/LYyaQEa?editors=1000
-->

<!-- 23. 群嘉
codepen:https://codepen.io/efzdamnp-the-lessful/pen/rNmRpqp
-->

<!-- 24. Mikan
codepen:https://codepen.io/elaine706/pen/oNWmpRr
-->

<!-- 25. WilsonHan
https://codepen.io/wi0821/pen/OJmqQwg
-->

<!--26. jimmyFang
https://codepen.io/pohxiqqo/pen/eYWXMZq?editors=1010
-->

<!--26. YuriT
CodePen:
https://codepen.io/wenfisht/pen/WNjmzKW
-->

<!--27. curry
CodePen:
https://codepen.io/Ted19851223/pen/bGWZKza
-->

<!-- 28. hellocrab
https://codepen.io/hellocrab/pen/OJmqwaB
-->

<!--39. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/dyWrwbd
-->

<!-- 40. kevinhes
codepen: https://codepen.io/kevinhes/pen/JjNzyMZ
-->

<!-- 41. Tori
codepen: https://codepen.io/hayen/pen/PomxyRa?editors=1010
-->

<!-- 42. Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/zYwXOeX
-->

<!-- 43.Sam li
codepen:https://codepen.io/kzepvtwi/pen/VwbNYeX
-->

<!-- 44. Hi Annie 小美女
https://codepen.io/lhohdalu/pen/KKmYwNp
-->

<!-- 45. Oober
https://codepen.io/xtsjrjdv/pen/rNmbexd
-->

<!-- 46.jameskrauser
https://codepen.io/jameskrauser/pen/eYWozgw
-->

<!-- 47. ZOE WU
https://codepen.io/Zoechiueh/pen/QWvPEWr
-->

<!-- 48. Elaine Liu
https://codepen.io/elaine7598/pen/zYwbWQo
-->

<!-- 49. anna
https://codepen.io/annhys/pen/MWmRVqM?editors=1010
-->

<!-- 50. KK
https://codepen.io/potatokaka/pen/wvdZQKr
-->

<!--51. Sihle Huang
code: https://codepen.io/bugbug777/pen/dyWLwQj
-->

<!-- 52. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/abWxXNK?editors=1000
-->

<!-- 53. YOYO
https://codepen.io/lumedkle/pen/eYWoXpb
-->

<!-- 54. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/LYyoEjO
-->

<!-- 55. Erin Huang
https://codepen.io/ErinHuang/pen/BaRevOb
-->

<!-- 56. Joe Kuo
https://codepen.io/alertislow/pen/QWvXjRV
-->

<!-- 57. Riley
https://codepen.io/jjpxbprd/pen/PomrXQa
-->

<!-- 58. Yurie
https://codepen.io/_u_jung/pen/mdwbyyr?editors=1100
-->

<!-- 59. una
https://codepen.io/xbsapbas-the-vuer/pen/ExXYZBr
-->

<!-- 60. Sylvia-H
https://codepen.io/Cosmosheart/pen/MWogEra?editors=1010 -->

<!-- 61. AKI
https://codepen.io/akichen27/pen/eYRzzVb
-->

<!-- 62. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/RwgGaYd
-->