在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 - 动画运行结束的回调函数