---
tags: Vue 直播班 - 2022 冬季班
---

# 動態輪播 - Swiper
* [第一週專題討論錄影](https://courses.hexschool.com/courses/vue-202121/lectures/45406851)

w1~w2：建立環境 Vite+Pinia+BS5，先做完首頁，layout header footer，換皮不換骨
w3：嘗試做其他頁面，文章 API，後台新增、刪除，前台顯示(3~4頁)，做加入購物車的資料傳遞(不刻畫面)
w4：產品 API，各產品頁面
w5~w6：加入購物車>完成訂單的邏輯作起來

## 專題討論

## Swiper 起手式
* [Getting Started](https://swiperjs.com/get-started)
* [範例程式碼](https://codepen.io/liao/pen/eYjoVoG)
* [觀看 Demo](https://swiperjs.com/demos)

## 必學 Demo

* [navigation(導覽列)](https://swiperjs.com/demos#navigation)
* [Pagination(分頁)](https://swiperjs.com/demos#pagination)
* [自動播放](https://swiperjs.com/demos#autoplay)
* [客製化分頁](https://swiperjs.com/demos#pagination-custom)
* [垂直輪播](https://swiperjs.com/demos/090-vertical/core)
* [Space between(頁面間隔)](https://swiperjs.com/demos#space-between)
* [Free Mode](https://swiperjs.com/demos#freemode)
* [Loop 重複顯示](https://swiperjs.com/demos#infinite-loop)
* [Effect coverflow](https://swiperjs.com/demos#effect-coverflow)
* [Effect cards(特效卡片)](https://swiperjs.com/demos#effect-cards)
* [畫廊](https://swiperjs.com/demos#autoplay)
* [響應式斷點](https://swiperjs.com/demos#responsive-breakpoints)、[Tailwin 版本補充](https://codepen.io/AliceChiang/pen/oNqOwQr)

## Vite([影音課程](https://courses.hexschool.com/courses/vue-202121/lectures/44165351)) + Swiper 整合

* [Vite 模版](https://github.com/hexschool/vite-template)

> npm install 後執行 `npm install swiper` 指令
:::spoiler 範例程式碼

<template>
  <h1>This is About page.</h1>
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>
  <div>
    <swiper :slides-per-view="1" :space-between="50"
      :modules="modules"
      navigation
      :pagination="{ clickable: true }">
      <swiper-slide>
        <img src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1443&q=80" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="https://images.unsplash.com/photo-1494256997604-768d1f608cac?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1529&q=80" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="https://images.unsplash.com/photo-1478098711619-5ab0b478d6e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation, Pagination } from 'swiper'

// Import Swiper styles
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

export default {
  data () {
    return {
      modules: [Navigation, Pagination]
    }
  },
  components: {
    Swiper,
    SwiperSlide
  }
}
</script>
<style scoped>
.swiper {
  width: 600px;
  height: 400px;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

:::