在同一个页面中多次使用swiper 轮播插件，要避免相互影响

在项目中使用轮播是很常见的，swiper 就是其中之一，pc 端，移动端都可以使用，效果还是不错的；

曾经在写一个页面的时候，其中有两个轮播图，于是都用swiper 来写了，写完之后发现显示的效果不是

预期的效果，有很大的问题；后来检查发现两个轮播图相互影响了，样式啥的冲突了，因为我没有单独的给container

或者slide 起类名，所以样式相互冲突了；

现在总结一下在同一个页面中使用多个 swiper 的方法：

swiper 的基本结构：

<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

</div>

</div>

1. 给swiper-container 再起个类名，然后操作这个新的类名，这样两个 swiper 不会冲突

 

<div class="swiper-container swiper1">

<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

</div>

</div>

<div class="swiper-container swiper2">

<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1</div>

<div class="swiper-slide">Slide 2</div>

<div class="swiper-slide">Slide 3</div>

</div>

</div>

2.无论是在初始化的时候还是设置样式的时候一定记得区别不同的siwper,这样就不会相互影响了；

   如果直接操作swiper-container 或者siwper-slide ，那么两个swiper 都是会起作用的；

   记住这个就没什么问题了；