react中swiper的配置(纯swiper篇)
本次的swiper的配置基于3.4.2版本的swiper包
本篇博客可以有效解决配置的swiper不轮播,不自动轮播问题
1、首先安装swiper3.4.2版本
npm i swiper@3.4.2 -s
这时候你会发现你的node_modules里面多了一个swiper包,如果你已经安装过其他的swiper,请先卸载
2、如果你的swiper里面轮播的内容是静态的,也就是死数据的话,new swiper可以放在 组件componentDidMount周期里面
componentDidMount(){
new Swiper ('.swiper-container',{
autoplay:1000,
loop: true
})
}
如果你的资源,会更新,是后期获取的,那么你的new swiper应该写在组件的componentDidUpdate 里面,这样的话,可以更新swiper,避免出现不轮播,效果出不来的情况
componentDidUpdate(){
new Swiper ('.swiper-container',{
autoplay:2000,
loop: true
})
}
3、swiper的引入和挂载
引入:
import Swiper from "swiper/dist/js/swiper"
import "swiper/dist/css/swiper.css"
这两个文件是在你写swiper组件里面引入的,一个是js,一个是css,
如果引入出错,你可以查看你的node_modules 里面是否有swiper包,包里面的目录是否和引入一致
挂载:
<div className="swiper-container">
<div className="swiper-wrapper">
{this.state.banner.map((items,imgs_index)=>{
return (
<div className="swiper-slide" key={items.banner_img}>
<img src={items.banner_img} alt=''></img>
</div>
)
})}
</div>
</div>
这样你的swiper就能正常使用啦!
如果你的配置出现问题的话,请留言,我等立马效力!
出现问题的,参数写成这样