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"
@mouseenter="freezeSlider"
@mouseleave="unfreezeSlider"
>
<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 重绘、状态丢失且性能较差。
通过上述方式，你将获得真正“毫秒级响应”的悬停暂停体验，滑块位置精准定格在鼠标进入瞬间，彻底告别“等动画播完才停”的尴尬行为。
