在项目中使用轮播是很常见的,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 都是会起作用的;
记住这个就没什么问题了;