咨询如何让Swiper每次仅切换一张幻灯片

嘿，我明白你遇到的问题了——用触控板大力滑动时，Swiper会跳过好几张幻灯片，而不是乖乖切换到下一张/上一张。别担心，咱们调整一下Swiper的配置就能解决这个问题！

你当前的配置里开启了mousewheel: true，但默认的鼠标滚轮逻辑会根据滑动的速度和力度来决定切换多少张，这就是导致跳滑的核心原因。咱们需要限制鼠标滚轮（包括触控板）每次只触发一次幻灯片切换。

给你修改后的配置代码，直接替换原来的初始化代码就行：

new Swiper('.swiper', {
  loop: false,
  speed: 700,
  grabCursor: false,
  mousewheel: {
    invert: false, // 可根据你的实际滑动方向调整，默认可能为true
    thresholdDelta: 300, // 设置滑动幅度阈值，超过才触发切换，避免快速滑动的误触
    forceToAxis: true, // 强制在Swiper的滚动轴向上响应操作
  },
  slidesPerView: 'auto',
  spaceBetween: 0,
  freeMode: false,
  // 手动监听滚轮事件，确保每次只切换一张
  on: {
    mousewheel: function(e) {
      e.preventDefault(); // 阻止原生页面滚动行为
      // 根据滚轮方向判断切换上/下一张
      if (e.deltaY > 0) {
        this.slideNext();
      } else {
        this.slidePrev();
      }
    }
  }
});

简单解释下关键配置的作用：

• thresholdDelta：设置一个合适的数值（比如300），只有当触控板/鼠标滚轮的滑动幅度超过这个阈值时，才会触发幻灯片切换，从根源上避免快速滑动时的多次触发。
• 额外的mousewheel事件监听：通过手动调用slideNext()和slidePrev()，直接强制每次滚轮操作只会切换一张幻灯片，彻底杜绝跳滑的情况。

备注：内容来源于stack exchange，提问作者Entropy