html使用antd的下拉框控件,react中swiper插件如何使用？

react中swiper插件如何使用？下面本篇文章给大家介绍一下在react中使用swiper插件做轮播图的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

react中swiper插件如何使用？

1.安装swipernpm install swiper --save

2. 在轮播组件里引入swiper//引入此路径，才不会打包失败

import Swiper from 'swiper/dist/js/swiper.js';

//引入样式，还可以加上自己的样式

import 'swiper/dist/css/swiper.min.css';

3. 在组件挂在完毕的时候，生成Swiper对象componentDidMount(){

//可以加上你需要的条件等，然后生成Swiper对象，

//一定要检查是不是每次都生成了Swiper对象，否则可能出现不滑动的情况和别的情况等

new Swiper('.swiper-container',{

loop: true, // 循环模式选项

// 如果需要分页器

pagination: {

el: '.swiper-pagination',

},

// 如果需要前进后退按钮

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

// 如果需要滚动条

scrollbar: {

el: '.swiper-scrollbar',

},

observer:true,//修改swiper自己或子元素时，自动初始化swiper

observeParents:true,//修改swiper的父元素时，自动初始化swiper

});

}

4.在render的时候，按照官方文档的结构来写render(){

return(

Slide 1

Slide 2

Slide 3

)

}

5.参考文档

更多web前端开发知识，请查阅 HTML中文网 ！！