Bootstript轮播冲突

解决方法:

使用不同的id

<div id="myCarousel1" class="carousel slide">
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="data:images/slide1.jpg" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="data: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="data:images/slide1.jpg" alt="First slide">
<div class="carousel-caption">标题 1</div>
</div>
<div class="item">
<img src="data: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="data:images/lba1.jpg" alt=""></a></div>
<div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="data: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="data:images/lba1.jpg" alt=""></a></div>
<div class="swiper-slide swipers"><a href="" class="lbck"><img class="lbmg "src="data: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~~完美解决

05-11 22:19
查看更多