同一个页面 用2个swiper的2种情况

 

第一种：2个swiper在同一页面（无选项卡）；

结构如下，每个'main-content'里都有一个‘swiper-container’。（对于swiper插件自带的class名，我们在引用swiper的时候不要修改，如果要对样式做修改或者添加新的js效果，可以添加新的类名或者id）

比如我的这两个swiper自定义了class名 ：'swiper1'   'swiper2'   

第一个swiper左右按钮：      ‘swiper-button-prev1’    ‘swiper-button-next1’   

第二个swiper左右按钮：      ‘swiper-button-prev2’    ‘swiper-button-next2’

添加样式

  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
  </style>

添加结构 

<!--第一个swiper-->
<div class="main-cont" style="position: relative">
    <div class="swiper-container swiper1">
        <div class="swiper-wrapper">
            <div class="swiper-slide">内容一<br>内容一<br>内容一<br>内容一<br>内容一<br>内容一<br>内容一</div>
            <div class="swiper-slide">内容二<br>内容二<br>内容二<br>内容二<br>内容二<br>内容二<br>内容二</div>
            <div class="swiper-slide">内容三<br>内容三<br>内容三<br>内容三<br>内容三<br>内容三<br>内容三</div>
            <div class="swiper-slide">内容四<br>内容四<br>内容四<br>内容四<br>内容四<br>内容四<br>内容四</div>
        </div>
        <!-- Add Pagination -->
    </div>
    <div class="swiper-button-prev swiper-button-prev1"></div>
    <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next swiper-button-next1"></div>
    <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>


<!--第二个swiper-->
<div class="main-cont" style="position: relative">
    <div class="swiper-container swiper2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">内容五<br>内容五<br>内容五<br>内容五<br>内容五<br>内容五<br>内容五<br>内容五</div>
            <div class="swiper-slide">内容六<br>内容六<br>内容六<br>内容六<br>内容六<br>内容六<br>内容六<br>内容六</div>
            <div class="swiper-slide">内容七<br>内容七<br>内容七<br>内容七<br>内容七<br>内容七<br>内容七<br>内容七</div>
            <div class="swiper-slide">内容八<br>内容八<br>内容八<br>内容八<br>内容八<br>内容八<br>内容八<br>内容八</div>
        </div>
        <!-- Add Pagination -->
    </div>
    <div class="swiper-button-prev swiper-button-prev2"></div>
    <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
    <div class="swiper-button-next swiper-button-next2"></div>
    <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
</div>

添加js  （我用的是最新版swiper4）

<script>

    var swiper1 = new Swiper('.swiper1', {
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next1',
            prevEl: '.swiper-button-prev1',
        },
    });
    var swiper2 = new Swiper('.swiper2', {
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next2',
            prevEl: '.swiper-button-prev2',
        },
    });
</script>

第二种：2个swiper在同一页面（在选项卡里）；

只需要添加这两个属性即可

observer: true,    详细介绍： https://www.swiper.com.cn/api/observer/218.html
observeParents: true,  详细介绍： https://www.swiper.com.cn/api/observer/219.html

 

<script>

    var swiper1 = new Swiper('.swiper1', {
        loop: true,
 //bug :解决tab栏切换嵌套swiper出现的冲突问题，添加如下两个属性即可
        observer: true,
        observeParents: true,
        navigation: {
            nextEl: '.swiper-button-next1',
            prevEl: '.swiper-button-prev1',
        },
    });
    var swiper2 = new Swiper('.swiper2', {
        loop: true,
 //bug :解决tab栏切换嵌套swiper出现的冲突问题，添加如下两个属性即可
        observer: true,
        observeParents: true,
        navigation: {
            nextEl: '.swiper-button-next2',
            prevEl: '.swiper-button-prev2',
        },
    });
</script>