一个页面多个bootstrip轮播以及一个页面多个swiper轮播 冲突问题

Bootstript轮播冲突

解决方法：

使用不同的id

<div id="myCarousel1" class="carousel slide">   
 <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
           <img src="images/slide1.jpg" alt="First slide">
           <div class="carousel-caption">标题 1</div>
        </div>
        <div class="item">
           <img src="images/slide2.jpg" alt="Second slide">
           <div class="carousel-caption">标题 2</div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel1" 
    data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel1" 
    data-slide="next">&rsaquo;</a>
</div>

<div id="myCarousel2" class="carousel slide">   
 <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active">
           <img src="images/slide1.jpg" alt="First slide">
           <div class="carousel-caption">标题 1</div>
        </div>
        <div class="item">
           <img src="images/slide2.jpg" alt="Second slide">
           <div class="carousel-caption">标题 2</div>
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="carousel-control left" href="#myCarousel2" 
    data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel2" 
    data-slide="next">&rsaquo;</a>
</div>

 

Swiper轮播冲突

解决方法

加一层父元素。注意标红部分。

<div class="lb1">
    <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="images/lba1.jpg" alt=""></a></div>
      <div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="images/lba2.jpg" alt=""></a></div>
    </div>
    <div class="pagination"></div>
  </div>
  <script>
  var mySwiper = new Swiper('.lb1 .swiper-container',{
    loop: true,
    autoplay: 3000,
    pagination: '.lb1 .pagination',
    paginationClickable: true  
  })
  </script>
</div>

<div class="lb2">
    <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="images/lba1.jpg" alt=""></a></div>
      <div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="images/lba2.jpg" alt=""></a></div>
    </div>
    <div class="pagination"></div>
  </div>
  <script>
  var mySwiper = new Swiper('.lb2 .swiper-container',{
    loop: true,
    autoplay: 3000,
    pagination: '.lb2 .pagination',
    paginationClickable: true  
  })
  </script>
</div>

tada~~完美解决