在一個頁面中插入多個swiper

本文轉載自查看原文 2019-09-27 10:04 801

<html>
<head>
  <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
 
<!--輪播111-->
<div style="height:100px" class="swiper-container banner1">
  <div class="swiper-wrapper">
        
        <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div>
      
        <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="廣告2" /></a></div>
      
        <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="淘寶" /></a></div>
      
  </div>
    <!-- 分頁器 -->
    <div class="swiper-pagination"></div>
</div>
 
 
 
<br>
<br>
<br>
 
 
<!--輪播222-->
<div style="height:100px" class="swiper-container banner2">
  <div class="swiper-wrapper">
        
        <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div>
      
        <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="廣告2" /></a></div>
      
  </div>
    <!-- 分頁器 -->
    <div class="swiper-pagination"></div>
</div>
 
 
<br>
<br>
<br>
 
 
<!--輪播333-->
<div style="height: 120px" class="swiper-container banner3">
  <div class="swiper-wrapper">
        
        <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div>
      
        <div class="swiper-slide"><a href='' class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="廣告2" /></a></div>
      
  </div>
    <!-- 分頁器 -->
    <div class="swiper-pagination"></div>
 
</div>
 
 
 
 
<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js" type="text/javascript"></script>
<script>
 
/*輪播111*/
var mySwiper = new Swiper('.banner1', {
    autoplay: true,//可選選項，自動滑動
    pagination: {
    el: '.swiper-pagination',
  },
})
 
/*輪播222*/
var mySwiper = new Swiper('.banner2', {
    // autoplay: true,//可選選項，自動滑動
    pagination: {
    el: '.swiper-pagination',
  },
})
 
 
 
/*輪播333*/
var mySwiper = new Swiper('.banner3', {
    // autoplay: true,//可選選項，自動滑動
    pagination: {
    el: '.swiper-pagination',
  },
})
 
</script>
 
</body>
</html>

免責聲明！

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

猜您在找 swiper4 一個頁面多個輪播 swiper,一個頁面使用多個輪播多個swiper插件在同一個頁面的用法。一個頁面多個swiper問題解決一個頁面使用多個相同Swiper輪播效果怎么寫會不沖突一個頁面多個bootstrip輪播以及一個頁面多個swiper輪播沖突問題在使用swiper時，解決同一個頁面使用多個輪播出現問題做法 vue中在一個頁面如何設置多個倒計時如何在多個頁面中，引入一個公共組件 vue-awesome-swiper的用法&同一頁面有多個swiper如何使用