swiper移入暂停_react中swiper注意事项及鼠标划入停止轮播

首先是实例化swiper

这里有一个注意点，就是实例化的时机

如果你的swiper内容是写死的，可以在componentDidMount中实例化，但是如果你的内容是通过接口异步请求过来的，就必须在componentDidUpdate里实例化，因为如果在 componentDidMount 中实例化，异步请求过来的内容可能还没有挂载完就实例化就会出现问题

componentDidUpdate(){

this.initialBannerSwiper()

}

这里还用到了一个知识点，就是单例模式，因为componentDidMount会多次执行，所以使用单例模式避免生成多个实例

initialBannerSwiper =()=>{

if(this.bannerSwiper){

return this.bannerSwiper //单例模式

}

this.bannerSwiper = new Swiper('#swiper-banner', {

slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式) 默认值为1。

observer: true, //当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时，自动初始化swiper。

observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。

shortSwipes: false, // 这个属性后面会说

slide