react 引入轮播插件_如何在react中引入swiper滑动插件

如何在react中引入swiper

一、使用npm安装swiper包npm i swiper -S

二、使用import引入swiper包import Swiper from 'swiper/dist/js/swiper.js'

import 'swiper/dist/css/swiper.css'

三、编写swiper的HTML代码

Slide 1

Slide 2

Slide 3

四、在react声明周期里创建Swiper对象// 直接引用数据将，new Swiper放在componentDidMount

// 用axios请求数据，new Swiper放在componentDidUpdate

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',

}

}

)

更多React相关技术文章，请访问React答疑栏目进行学习！