拨打电话

Swiper下一轮的第一个图片点击没反应

发布时间:2023-11-02 16:15
发布者:admin
浏览次数:60

这个问题可能是由于轮播组件的循环模式导致的。在循环模式下,Swiper会自动在首尾两端添加一些复制的轮播项,以实现无缝轮播的效果。因此,当当前显示的是最后一个图片时,下一轮的第一个图片实际上是复制的第一个图片,它的索引与原来的数据不一致,可能导致点击事件无法触发。

要解决这个问题,可以通过Swiper提供的回调函数来检测轮播到最后一张图片,然后手动将Swiper跳转到第一张图片,从而避免复制轮播项的影响。

具体代码如下:

javascriptCopy Codenew Swiper('.swiper-container', {  // ...其他配置
  on: {    reachEnd: function () { // 到达最后一张图片时触发
      this.slideTo(0); // 跳转到第一张图片
    }
  }
});

这样,在到达最后一张图片时,Swiper将自动跳转到第一张图片,保证下一轮的第一个图片可以正常触发点击事件。