---
tags: 公益程式體驗營
---
# 5. Swiper 輪播動畫效果
<!--修改切板二時有需要再補筆記-->
* [助教筆記](https://hackmd.io/itEybVN0S9uUxiNbpY7-Xw?view)
* 完成 Swiper 的 CodePen 範例程式碼
https://codepen.io/izumi-dev/pen/ExQLMwg
https://codepen.io/tinchen/pen/dydBvpd
* 加碼的swiper影片jquery課程裡面有 (完全沒印象 哈哈哈)

## Swiper 官方文件
[Swiper 官方文件](https://swiperjs.com/)

Swiper 官方頁面後來有更新，CDN
CSS：https://unpkg.com/swiper/swiper-bundle.min.css
JavaScript：https://unpkg.com/swiper/swiper-bundle.min.js

## 使用方式
1. 引入CDN ，`<script>`要放在body結尾前

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

2. 加入html結構

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

3. 加入CSS

.swiper {
  width: 600px;
  height: 300px;
}

4. 初始化 Swiper:
例如如果不需要scrollbar，就把javascript和html的.swiper-scrollbar都隱藏起來或刪除

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  // scrollbar: {
  //   el: '.swiper-scrollbar',
  },
});

## 套用步驟: 聊天機器人版型使用到的swiper
1.到官網demo的地方找到"Space between"，點擊code

2.把html、css、javascript分別貼到自己的專案

3.在swiper-slide內插入圖片`<img>`

4.在調整css或名稱 完成