swiper 两个轮播 绑定触发
可以使用swiper的API来实现两个轮播图的绑定触发。
首先,初始化两个swiper实例,分别命名为swiper1和swiper2。然后,在swiper1的初始化配置中,添加一个回调函数,在每次切换到新的轮播项时触发该函数。在该回调函数中,通过swiper2的API来切换到对应的轮播项。
具体代码如下所示:
// 初始化swiper1
var swiper1 = new Swiper('.swiper1', {
// 其他配置项
// ...
on: {
slideChange: function() {
// 获取当前轮播项的索引
var activeIndex = this.activeIndex;
// 切换到对应的轮播项
swiper2.slideTo(activeIndex);
}
}
});
// 初始化swiper2
var swiper2 = new Swiper('.swiper2', {
// 其他配置项
// ...
});
上述代码中,.swiper1和.swiper2是两个轮播图的容器元素的选择器,需要根据实际情况修改。
这样,当swiper1切换到新的轮播项时,swiper2也会自动切换到对应的轮播项,实现了两个轮播图的绑定触发效果
原文地址: http://www.cveoy.top/t/topic/ib2l 著作权归作者所有。请勿转载和采集!