react中一个页面使用多个swiper插件相互干扰问题的解决

一个页面使用多个swiper的时候可能会相互影响，其实这个问题很显而易见，如果你实例化的都是同一个swiper。

因此，解决办法就是给swiper-container添个别的类名，实例化的时候用这个不同的类名。

如下：

第一个swiper，每3秒自动轮播。

 componentDidMount() {
       this.swiper1= new Swiper('.swiper1', {
            loop: true, // 循环模式选项
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            }
        })
    }
    render() {
        // console.log(this.props.banner)
        return (
                <div className="swiper-container swiper1">
                    <div className="swiper-wrapper">
                        {
                            this.props.banner.map((item, index) => {
                                return <div className="swiper-slide" key={index}>
                                    <img src={item.advImg} alt="banner" />
                                </div>
                            })
                        }
                    </div>
                </div>
        )
    }

第二个swiper，手动切换

 componentDidMount() {
        this.swiper2 = new Swiper('.swiper2', {
    
        })
    }
    render() {
        return (
            <div className="swiper-container swiper2">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">
                        slide1
                    </div>
                    <div className="swiper-slide">
                        slide2
                    </div>
                </div>
            </div>
        )
    }

另外，如果你使用了分页器，那么在实例化过程中，分页器的类名也要多添加一个不一样的，用这个不同的类名来实例化。

pagination: {
                    el: '.swiper-pagination',   //这里也要换成不一样的类名，不要用这个了。
}