这是两个普通的一次显示多个slides的swiper
var swiper1 = new Swiper('.swiper-container01', {
slidesPerView: 3,
initialSlide: 1,
centeredSlides: true,
spaceBetween: 30,
loop:true,
pagination: {
el: '.swiper-pagination1',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next1',
prevEl: '.swiper-button-prev1',
},
});
var swiper2 = new Swiper('.swiper-container02', {
slidesPerView: 3,
spaceBetween: 30,
loop:true,
observer:true,
observeParents:true,
autoplayDisableOnInteraction: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
},
});
第二个swiper因为切换tab,父级起初是display:none,导致子级中的swiper无法正常切换运行
这时候在出bug的swiper中加入
observer:true,
observeParents:true,
autoplayDisableOnInteraction: false,
就可以了