swiper在react中的使用
- npm下载插件
npm i swiper --save
现在默认最新版本 是 “6.0.4”
这个版本在引入css样式的时候和之前版本引入路径不同:
之前版本:import “swiper/css/swiper.css”
现在版本:import ‘swiper/swiper-bundle.min.css’
如果有多个轮播图最好写到组件里面 - 写在render中的结构,类名都是swiper引入的css样式
render () {
return (
<>
<div className="swiper-container">
<div className="swiper-wrapper">
<div className="swiper-slide ">slider1</div>
<div className="swiper-slide ">slider2</div>
<div className="swiper-slide ">slider3</div>
</div>
</div>
</>
);
}
- 定义轮播图的属性。
componentDidMount () {
//可以加上你需要的条件等,然后生成Swiper对象,
//一定要检查是不是每次都生成了Swiper对象,否则可能出现不滑动的情况和别的情况等
new Swiper('.swiper-container', {
loop: true, // 循环模式选项
autoplay: true, //自定轮播
})
}
//更多属性见官网API文档
// https://www.swiper.com.cn/api/start/new.html
以上三步就实现了一个最基本的轮播图
喜欢交朋友的可以互相关注一下 ~~