如何在悬停时立即停止滑动器中的自动播放

Question

我有一个自动播放的滑动器，当我将鼠标悬停在它上面时，它应该立即停止，现在它完成了转换，只有在那之后它才停止

这里的问题是如何在光标悬停的地方立即停止，而不需要等待转换结束

我可以以某种方式中断过渡吗

这是 Vue 上的 Swiper 配置

this.swiper = new Swiper('.swiper-brand-container', {
      loop: true,
      spaceBetween: 120,
      slidesPerView: 'auto',
      centeredSlides: true,
      nested: true,
      speed: 5000,
      autoplay: {
        delay: 0,
      },
    });

以及停止和开始自动播放的功能

stopAutoplay() {
      if (this.swiper) {
        this.swiper.autoplay.stop();
      }
    },
startAutoplay() {
      if (this.swiper) {
        this.swiper.autoplay?.start();
      }
    },

1. 我尝试重新创建不自动播放的滑动器
2. 尝试通过样式影响 swiper 容器
3. 动态更改参数

找不到任何信息

Answer 1

试试这个

<template>
  <div
    class="swiper-brand-container"
    @mouseenter="stopAutoplay"
    @mouseleave="startAutoplay"
  >
    <!-- Your Swiper content goes here -->
  </div>
</template>