在React中使用Swiper

插件特色

swipe.js是一個比較有名的觸摸滑動插件，它能夠處理內容滑動，支持自定義選項，你可以讓它自動滾動，控制滾動間隔，返回回調函數等。經常可見使用在移動前端開發中。

使用方法

先安裝插件   npm i swiper --save

在文件中引入插件和css樣式

import Swiper from "swiper"
import "swiper/css/swiper.css"

粘貼代碼

<div className="swiper-container">

    <div className="swiper-wrapper">

        <div className="swiper-slide">Slide 1</div>

        <div className="swiper-slide">Slide 2</div>

        <div className="swiper-slide">Slide 3</div>

    </div>
    <!-- 如果需要分頁器 -->
    <div className="swiper-pagination"></div>

    
    <!-- 如果需要導航按鈕 -->
    <div className="swiper-button-prev"></div>

    <div className="swiper-button-next"></div>

    
    <!-- 如果需要滾動條 -->
    <div className="swiper-scrollbar"></div>
</div>

需要注意的是在jsx中要將class都替換成className

然后再componentDidmount中進行實例

componentDidmount(){
      new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切換選項
    loop: true, // 循環模式選項
    
    // 如果需要分頁器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前進后退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滾動條
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })              
}    

然后就可以使用了

swiper還有許多設置

startSlide Integer (default:0) - 開始滾動的位置
speed Integer (default:300) - 動畫滾動的間隔（秒數）
auto Integer - 開始自動幻燈片（以毫秒為單位幻燈片之間的時間）
continuous Boolean (default:true) - 創建一個無限的循環（當滑動到所有動畫結束時是否循環滑動）
disableScroll Boolean (default:false) - 當滾動滾動條時是否停止幻燈片滾動
stopPropagation Boolean (default:false) - 是否停止事件冒泡
callback Function - 幻燈片運行中的回調函數
transitionEnd Function - 動畫運行結束的回調函數