在一个页面中插入多个swiper

Posted ctwanyou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在一个页面中插入多个swiper相关的知识,希望对你有一定的参考价值。

<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>

 

以上是关于在一个页面中插入多个swiper的主要内容,如果未能解决你的问题,请参考以下文章

Swiper 4.0.7 如何在鼠标悬浮在上方时停止自动切换

如何实现窗口尺寸改变,swiper重新初始化尺寸

swiper,一个页面使用多个轮播

swiper在一个页面多个轮播图

微信小程序:swiper高度动态适配

使用swiper动态加载数据遇到的坑