第一步:在cmd中引入
npm install --save swiper
第二步:
在页面上引入:
import Swiper from ‘swiper/dist/js/swiper.js’
import ‘swiper/dist/css/swiper.min.css’
第三步:在生命周期钩子函数componentDidMount()中写入轮播方法
componentDidMount(){
var mySwiper = new Swiper('.swiper-container', {
loop: true,//这里是自动轮播
autoplay:{
delay:1000 ,
disableOnInteraction: false
},
pagination : {
el:'.swiper-pagination',//这里是分页器设置
}
});
}
第四步:在render中渲染dom
(1)如果数据是根据异步加载完成那么我们需要通过数组遍历:
render() {
return (
<div className="App">
<div className="swiper-container">
<div className="swiper-wrapper">
{
this.state.carouselr.map((item,index)=>{
return(
<div className="swiper-slide" key={index}>
<img src={item.picUrl}/>
</div>
)
})
}
</div>
<div className='swiper-pagination'></div>
</div>
</div>
);
}
(2)如果是直接在render中渲染那么代码如下:
render() {
return (
<div className="Hello">
<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>
</div>
);
}