html代码:
<div class="swiper-container swiper-container1"> <!--使用swiper-container1类名,加以区分容器-->
......
<div class="swiper-pagination swiper-p1"></div> <!--使用swiper-p1类名,加以区分分页符-->
</div>
<div class="swiper-container visible-xs-block swiper-container2">
......
<div class="swiper-pagination swiper-p2"></div>
</div>
js代码:
var swiper = new Swiper('.swiper-container1', { // 区分容器
pagination: '.swiper-p1', // 区分分页符
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
mousewheelControl: true
});
var swiper2 = new Swiper('.swiper-container2', { // 区分容器
pagination: '.swiper-p2', // 区分分页符
direction: 'vertical',
slidesPerView: 1,
paginationClickable: true,
spaceBetween: 0,
mousewheelControl: true
});
这样就解决了,当同一个页面中多个swiper存在时,互相影响的问题。
网友评论