遇到要使用两个swiper且双向控制的开发需求,
<div class="swiper-text"></div>
<div class="swiper"></div>
var swiper = new Swiper('.swiper', {
// autoplay: true,
loop: true,
speed: 1000,
spaceBetween: 0,
effect: 'fade',
fadeEffect: {
crossFade: true
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
on: {
slideChange: function () {
swiperText.slideToLoop(this.realIndex)
}
}
});
var swiperText = new Swiper('.swiper-text', {
// autoplay: true,
loop: true,
speed: 1000,
spaceBetween: 0,
on: {
slideChange: function () {
swiper.slideToLoop(this.realIndex)
}
}
});
在使用以上方法尝试双向控制时发现报错: "Cannot read properties of undefined (reading 'slideToLoop')" 后尝试将第一个swiper下的loop注释掉,随即解决问题。
var swiper = new Swiper('.swiper', {
//autoplay: true,
//loop: true, 注释掉这行代码
.......
});
原因
有清楚的大佬可以说下