swiper 默认 hover 停止 autoplay 会等待当前动画完成，本文详解通过动态重置 speed 和 delay 参数，配合 autoplay.stop()/start()，实现在鼠标悬停瞬间冻结滑块位置、零延迟中断过渡。

swiper 默认 hover 停止 autoplay 会等待当前动画完成，本文详解通过动态重置 speed 和 delay 参数，配合 autoplay.stop()/start()，实现在鼠标悬停瞬间冻结滑块位置、零延迟中断过渡。

在使用 Swiper 实现轮播图时，若启用了 autoplay 并希望在用户鼠标悬停（mouseenter）时立即冻结当前滑块位置（而非等待当前 transition 动画结束），仅调用 swiper.autoplay.stop() 是不够的——因为 Swiper 的默认行为仍会执行完当前 slide 切换的 CSS 过渡（由 speed 控制）。要真正“中断过渡”，需同步将动画速度设为 0，并暂停自动播放逻辑。

✅ 正确做法：冻结 + 参数重置

核心思路是：悬停时不仅停止 autoplay，还要将 speed 和 autoplay.delay 临时设为 0，使 Swiper 内部过渡立即中止；恢复时再还原原始参数并重启 autoplay。

以下为 Vue 2（Options API）完整实现示例：

<template><div class="swiper-brand-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
</template><script>
import Swiper from 'swiper';

export default {
  data() {
    return {
      swiper: null,
      isFrozen: false,
      // 保存原始配置，便于恢复
      originalAutoplayDelay: 5000,
      originalSpeed: 5000,
    };
  },
  mounted() {
    this.initSwiper();
  },
  beforeDestroy() {
    if (this.swiper) this.swiper.destroy(true, true);
  },
  methods: {
    initSwiper() {
      this.swiper = new Swiper('.swiper-brand-container', {
        loop: true,
        spaceBetween: 120,
        slidesPerView: 'auto',
        centeredSlides: true,
        nested: true,
        speed: this.originalSpeed,
        autoplay: {
          delay: this.originalAutoplayDelay,
        },
      });
    },
    freezeSlider() {
      if (this.swiper && !this.isFrozen) {
        this.swiper.autoplay.stop();
        // ⚠️ 关键：强制终止过渡动画
        this.swiper.params.speed = 0;
        this.swiper.params.autoplay.delay = 0;
        // 可选：手动触发一次 update，确保状态同步（尤其在快速悬停时）
        this.swiper.update();
        this.isFrozen = true;
      }
    },
    unfreezeSlider() {
      if (this.swiper && this.isFrozen) {
        // 恢复原始参数
        this.swiper.params.speed = this.originalSpeed;
        this.swiper.params.autoplay.delay = this.originalAutoplayDelay;
        // 重启 autoplay（注意：start() 会基于当前 params.delay 生效）
        this.swiper.autoplay.start();
        this.isFrozen = false;
      }
    },
  },
};
</script>

? 补充说明与注意事项

• speed: 0 的作用：Swiper 在切换 slide 时依赖 params.speed 控制过渡时长。设为 0 后，所有内部 translate 变更将变为即时（无 CSS transition），从而实现视觉上的“瞬停”。
• update() 调用建议：在部分 Swiper 版本（如 v6.x）中，修改 params 后调用 swiper.update() 可确保新参数被立即应用，避免偶发延迟。
• Vue 3 用户提示：若使用 Composition API，可将 swiper 和 isFrozen 声明为 ref，并在 onMounted/onBeforeUnmount 中管理生命周期。
• 无障碍友好性：建议同时监听 focusin/focusout（针对键盘焦点），提升可访问性。
• 避免重复销毁重建：不要通过销毁并重建 Swiper 来实现暂停——这会导致 DOM 重绘、状态丢失且性能较差。

通过上述方式，你将获得真正“毫秒级响应”的悬停暂停体验，滑块位置精准定格在鼠标进入瞬间，彻底告别“等动画播完才停”的尴尬行为。