Swiper使用鼠标滚轮滑动后无法恢复autoplay自动播放问题求助

问题根因 #

Swiper 内置的disableOnInteraction配置仅覆盖触摸、拖拽类交互，鼠标滚轮触发的滑动属于独立的交互逻辑，不受该配置控制，因此滚轮操作结束后autoplay不会自动恢复。

解决方案 #

监听Swiper的滚轮事件，搭配防抖逻辑，在滚轮操作完全停止后手动重启autoplay即可，修改后的JS代码如下：

// 防抖函数，避免滚轮频繁触发时多次调用重启方法
function debounce(func, delay = 300) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

const restartAutoplay = debounce(() => {
  gallery_slider.autoplay.start();
})

const gallery_slider = new Swiper ('.gallery-slider', {
    slidesPerView: 2.5,
    loopedSlides: 3,
    autoplay: {
        delay: 0,
        disableOnInteraction: false,
    },
    speed: 10000,
    loop: true,
    touchRatio: .3,
    spaceBetween: 20,
    effect: 'slide',
    simulateTouch: true,
    freeMode: {
        enabled: true
    },
    mousewheel: {
        sensitivity: .5,
    },
    // 新增事件监听
    on: {
      // 每次触发滚轮事件时调用防抖后的重启方法
      mousewheel: function() {
        restartAutoplay();
      }
    }
});

如果觉得重启等待时间太长或者太短，可以调整防抖函数的delay参数（单位为毫秒）即可。

内容的提问来源于stack exchange，提问作者Flavio RT