一個頁面使用多個相同Swiper輪播效果怎么寫會不沖突


主要看你的輪播是怎么寫的,一般用ID區分就行了

以常用的輪播插件Swiper為例

<!--下載插件http://www.swiper.com.cn/download/-->
<!--引入插件-->
<link rel="stylesheet" href="path/to/swiper.min.css">
<script src="path/to/swiper.min.js"></script>
<!--HTML-->
<div class="swiper-container" id="swiper1"><!--第一個輪播-->
    <div class="swiper-wrapper">
        <div class="swiper-slide">圖1</div>
        <div class="swiper-slide">圖2</div>
        <div class="swiper-slide">圖3</div>
    </div>
 </div>
 <div class="swiper-container" id="swiper2"><!--第二個輪播-->
    <div class="swiper-wrapper">
        <div class="swiper-slide">圖4</div>
        <div class="swiper-slide">圖5</div>
        <div class="swiper-slide">圖6</div>
    </div>
 </div>
 <!--JS-->
<script>       
  var mySwiper1 = new Swiper ('#swiper1');    //第一個輪播   
  var mySwiper2 = new Swiper ('#swiper2');    //第二個輪播   
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM