---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 39

## Swiper 套件

### Swiper.js 介紹：

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

從 [Get Started 頁面](https://swiperjs.com/get-started/) 就可以看到要使用此套件有哪些引入方法，這邊我們就先嘗試引用 CDN。


接下來可以到 [API 頁面](https://swiperjs.com/swiper-api)了解基本使用方式

1. 基本 [HTML 架構](https://swiperjs.com/swiper-api#swiper-full-html-layout)

   <!-- Slider main container -->
    <div class="swiper">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>
    </div>

2. [初始化設定](https://swiperjs.com/swiper-api#initialize-swiper)

    const swiper = new Swiper('.swiper', {
      // 分頁   
      pagination: {
        el: '.swiper-pagination',
      },
      // 左右箭頭    
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 滾動條
      scrollbar: {
        el: '.swiper-scrollbar',
        draggable: true,
      },
    });

此時就可以簡單呈現出一個輪播效果，觀看[範例](https://codepen.io/hexschool/pen/LYdBjpq)

接下來可以直接到 [Demo 頁面](https://swiperjs.com/demos/) 搜尋我們想要引入的樣式，以第六週設計稿首頁 Swiper 為例，我們需要有左右箭頭和分頁的樣式，不需要滾動條，可以選擇 [CSS mode](https://swiperjs.com/demos#css-mode) 這個模板

點擊 [Open in new window](https://swiperjs.com/demos/145-css-mode/core) > 檢視網頁原始碼 就可以看到此樣式套用的程式碼，重點分別是
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/swiper-api)

## 題目
試著使用 [Swiper](https://swiperjs.com/get-started) 套件完成第六週版型的輪播，如圖：

> 相關細節樣式設定請觀看設計稿製作

要求：
- 左邊圖片與右方區塊會同步輪播
- 嘗試使用 [Effect fade](https://swiperjs.com/demos#effect-fade) 效果

提示：
- 會使用到 position 定位
- 可以直接運用 Swiper 的 class 撰寫 CSS 覆蓋預設樣式
- 左右箭頭使用 Material icon

## 回報流程

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


<!-- 解答：https://codepen.io/hexschool/pen/XWEBzrK -->

回報區
---

| Discord | CodePen / 答案 |
|:---------------:|:----------------------------------------------------------------:|
| Iris Huang#6727 | [CodePen](https://codepen.io/ythuang/pen/dymgKBX) |
| WEI_RIO#9342 | [CodenPen](https://codepen.io/wei_wu/pen/XWEoRQy?editors=1100) |
| 布魯諾#7239 | [CodenPen](https://codepen.io/bruno-yu/pen/vYRvZBL?editors=1101) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/zYWyzjO) |
| int#7518 | [Codepen](https://codepen.io/intHuang/pen/xxWmLXr?editors=0100) |
| yuyu#6310 | [Codepen](https://codepen.io/yuyu0905/pen/PoRXjMe?editors=1100) |
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/RwMEQpz) |
|威0#6919|[codepen](https://codepen.io/n0918679182/pen/vYRvJRa?editors=1100)|
| YC#2522 | [CodePen](https://codepen.io/YCLu/pen/qBoLPrJ) |
| Clara#1275 | [CodePen](https://codepen.io/bsupixqu/pen/XWEogdG) |
| Amberhh#2465 | [Codepen](https://codepen.io/Amberhh/pen/dymwJbW?editors=1000) |
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/YzagNOy)|
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/abYxLLW?editors=1100)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/JjLqjop)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/abYrOeL)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/ZExgxOG)|
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/VwxwaJj)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/yLKdNOw)|
| Melon#0380 | [Codepen](https://codepen.io/BalaFang/pen/YzLWZgq) |
| QOO#8446 | [Codepen](https://codepen.io/QOOQOOQ/pen/QWmooyG) |