如何让鼠标悬停时Swiper.js滑块立即停止滚动，消除切换时长延迟？

你遇到的问题是设置speed后，Swiper的pauseOnMouseEnter需要等待切换时长才会停止滚动，下面提供两种可行的解决方案：

方案一：通过DOM样式强制停止过渡 #

初始化Swiper后添加鼠标事件监听，直接干预滑块容器的过渡状态：

const swiper = new Swiper('.swiper', {
  autoplay: {
    disableOnInteraction: false,
    pauseOnMouseEnter: true
  },
  speed: 5000,
  loop: true,
  // 你的其他配置项
});

// 鼠标悬停时立即停止
swiper.el.addEventListener('mouseenter', () => {
  swiper.autoplay.stop();
  const wrapper = swiper.el.querySelector('.swiper-wrapper');
  // 冻结当前位置，取消过渡动画
  wrapper.style.transition = 'transform 0ms';
  wrapper.style.transform = wrapper.style.transform;
});

// 鼠标离开后恢复正常滚动
swiper.el.addEventListener('mouseleave', () => {
  const wrapper = swiper.el.querySelector('.swiper-wrapper');
  wrapper.style.transition = `transform ${swiper.params.speed}ms`;
  swiper.autoplay.start();
});

方案二：使用Swiper原生API控制 #

利用Swiper内置的setTransition和setProgress方法，更贴合框架逻辑：

const swiper = new Swiper('.swiper', {
  // 原有配置不变
  autoplay: {
    disableOnInteraction: false,
    pauseOnMouseEnter: true
  },
  speed: 5000,
  loop: true
});

swiper.el.addEventListener('mouseenter', () => {
  swiper.autoplay.stop();
  // 强制设置过渡时长为0，保持当前进度
  swiper.setTransition(0);
  swiper.setProgress(swiper.progress, 0);
});

swiper.el.addEventListener('mouseleave', () => {
  // 恢复原过渡时长，重启自动播放
  swiper.setTransition(swiper.params.speed);
  swiper.autoplay.start();
});

这两种方法都能实现悬停时立即停止滚动，同时保留非悬停状态下的平滑滚动效果。方案二更依赖Swiper原生API，避免直接操作DOM，兼容性更好。

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