可以使用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也会自动切换到对应的轮播项,实现了两个轮播图的绑定触发效果

swiper 两个轮播 绑定触发

原文地址: http://www.cveoy.top/t/topic/ib2l 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录