---
tags: 網頁切版直播班
---
# 8/24(五) 每日任務（Booking 電商+Swiper）

### 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 的樣式（透過左右按鈕切換輪播圖片）
點擊 [Source Code](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 Nav 元件](https://getbootstrap.com/docs/4.5/components/navs/#javascript-behavior) 搭配 [Swiper](https://swiperjs.com/demos/) 套件完成第八週設計稿首頁的部分版型，如圖：


要求：
* 上方 Nav 可以動態切換
* 卡片可以一個一個輪播

<div class="container">
  <nav>
    <div class="nav nav-tabs" id="nav-tab" role="tablist">
      <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Bali<sup>128</sup></a>
      <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Okinawa<sup>67</sup></a>
      <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Taipei<sup>53</sup></a>
    </div>
  </nav>
  <div class="tab-content" id="nav-tabContent">
    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
      <!-- Swiper -->
     
    </div>
    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Okinawa</div>
    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">Taipei</div>
  </div>
</div>

.nav-tabs{
  margin-bottom: 24px;  
}
.nav-link.active,.nav-link:hover {
  border-width:0;
  border-bottom:2px solid #6C51E2;
}
.card{
  border:0;
}
.card-body{
  padding:0;
}
.card-img-top{
  height:175px;
  object-fit:cover;
}
.swiper-button-prev{
  display:none;
}
.swiper-button-next{
  padding:25px;
  border-radius:50%;
  background-color:#F1F0F8;
}
.swiper-button-next:after{
  color: black;
  font-size:10px;
  font-weight: bold;
}

var swiper = new Swiper('.swiper-container', {
      slidesPerView: 4,
      spaceBetween: 30,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
});

載入 CDN：

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

Bootstrap
* https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css
* https://code.jquery.com/jquery-3.5.1.slim.min.js
* https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js

Material Design Icon
* https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至 thread 中回報就算完成了喔～解答請參考下方（需打開程式碼的部分觀看）

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