在React中使用Swiper

插件特色

swipe.js是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。

使用方法

先安装插件 npm i swiper --save

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

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

粘贴代码

 1 <div className="swiper-container">

 2     <div className="swiper-wrapper">

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

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

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

 6     </div>
 7     <!-- 如果需要分页器 -->
 8     <div className="swiper-pagination"></div>

 9     
10     <!-- 如果需要导航按钮 -->
11     <div className="swiper-button-prev"></div>

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

13     
14     <!-- 如果需要滚动条 -->
15     <div className="swiper-scrollbar"></div>
16 </div>

需要注意的是在jsx中要将class都替换成className

然后再componentDidmount中进行实例

 1 componentDidmount(){
 2       new Swiper ('.swiper-container', {
 3     direction: 'vertical', // 垂直切换选项
 4     loop: true, // 循环模式选项
 5     
 6     // 如果需要分页器
 7     pagination: {
 8       el: '.swiper-pagination',
 9     },
10     
11     // 如果需要前进后退按钮
12     navigation: {
13       nextEl: '.swiper-button-next',
14       prevEl: '.swiper-button-prev',
15     },
16     
17     // 如果需要滚动条
18     scrollbar: {
19       el: '.swiper-scrollbar',
20     },
21   })              
22 }

然后就可以使用了

swiper还有许多设置

1 startSlide Integer (default:0) - 开始滚动的位置
2 speed Integer (default:300) - 动画滚动的间隔（秒数）
3 auto Integer - 开始自动幻灯片（以毫秒为单位幻灯片之间的时间）
4 continuous Boolean (default:true) - 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）
5 disableScroll Boolean (default:false) - 当滚动滚动条时是否停止幻灯片滚动
6 stopPropagation Boolean (default:false) - 是否停止事件冒泡
7 callback Function - 幻灯片运行中的回调函数
8 transitionEnd Function - 动画运行结束的回调函数

在React中使用Swiper

猜你喜欢