swiper在一个页面多个轮播图
<script>
var swiper = new Swiper('.swiper-container1', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination1',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
<script>
var swiper2 = new Swiper('.swiper-container2', {
slidesPerView: 4,
spaceBetween: 30,
slidesPerGroup: 4,
loop: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loopFillGroupWithBlank: true,
pagination: {
el: '.swiper-pagination2',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
注意: 千万不要直接更改swiper-container
应该在后面加上所起的名称
<div class="swiper-container swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/banner.png" width="100%"
height="328px"></div>
<div class="swiper-slide"><img src="img/banner.png" width="100%"
height="328px"></div>
<div class="swiper-slide"><img src="img/banner.png" width="100%"
height="328px"></div>
<div class="swiper-slide"><img src="img/banner.png" width="100%"
height="328px"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination1"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<div class="swiper-container swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide success-item"><img src="img/book3.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/book3.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
<div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination2"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
作者:大BUG
出处:http://www.cnblogs.com/vientiane/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。