国产91精品人妻噜啊噜,无码专区,七猫精品,99热这里只有精在线

swiper在同一個頁面中多次使用swiper避免沖突

時間：2019-09-07 訪問量：0

曾經(jīng)在寫一個頁面的時候，其中有兩個輪播圖，于是都用swiper 來寫了，寫完之后發(fā)現(xiàn)顯示的效果不是

預期的效果，有很大的問題；后來檢查發(fā)現(xiàn)兩個輪播圖相互影響了，樣式啥的沖突了，因為我沒有單獨的給container

或者slide 起類名，所以樣式相互沖突了；

現(xiàn)在總結一下在同一個頁面中使用多個 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.無論是在初始化的時候還是設置樣式的時候一定記得區(qū)別不同的siwper,這樣就不會相互影響了；

亚洲青青视频一区|8MAV在线观看|天天看AV天天看|中日成人手机在线|欧美激情五区六区|亚洲婷婷天堂级片|亚洲天堂网7777|欧美日韩其他另类|手机在线成人AV|成人性大片一区二区三区四区五区

swiper在同一個頁面中多次使用swiper避免沖突