swiper在一个页面多个轮播图
Posted 大BUG
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>
以上是关于swiper在一个页面多个轮播图的主要内容,如果未能解决你的问题,请参考以下文章