Swiper自动轮播无法在鼠标悬停/移出时暂停问题求助

问题 #

使用开启autoplay的连续滚动Swiper组件，配置pauseOnMouseEnter: true完全无效；手动编写mouseenter/mouseleave事件调用autoplay.stop()和autoplay.start()，控制台能打印日志但滚动依然停不下来。

原因 #

你的配置同时开启了freeMode: true、delay: 1和线性过渡，这种连续滚动实现逻辑下：

• Swiper的autoplay本质是每隔1ms触发一次极短过渡，但speed: 5000和线性过渡让视觉上呈现连续滚动效果
• autoplay.stop()仅停止触发下一次过渡，但当前正在执行的5000ms过渡会继续完成，所以看起来滚动没停
• freeMode模式下，Swiper原生的autoplay暂停逻辑不适用，导致pauseOnMouseEnter失效

解决方案 #

直接通过控制swiper-wrapper的CSS过渡实现暂停/继续，同时保存当前滚动位置避免恢复时跳变：

修改步骤 #

1. 移除原有mouseenter/mouseleave事件代码
2. 添加以下自定义控制逻辑：

let isPaused = false;
let savedPosition = 0;

$(".mySwiper").on('mouseenter', function() {
  if (!isPaused) {
    // 保存当前滚动位置
    savedPosition = scrollc.getWrapperTranslate('x');
    // 暂停过渡动画
    scrollc.wrapperEl.style.transition = 'none';
    // 固定到当前位置
    scrollc.setWrapperTranslate('x', savedPosition);
    isPaused = true;
    console.log('slider paused');
  }
});

$(".mySwiper").on('mouseleave', function() {
  if (isPaused) {
    // 恢复过渡动画
    scrollc.wrapperEl.style.transition = 'transform 5000ms linear';
    // 计算偏移量，从当前位置继续滚动
    const currentTranslate = scrollc.getWrapperTranslate('x');
    const diff = savedPosition - currentTranslate;
    scrollc.setWrapperTranslate('x', savedPosition - diff);
    isPaused = false;
    // 重启autoplay
    scrollc.autoplay.start();
    console.log('slider resumed');
  }
});

3. 建议将autoplay的delay调整为与speed一致（5000ms），减少不必要的频繁触发，优化性能：

autoplay: {
  delay: 5000, // 和speed保持一致
  pauseOnMouseEnter: true,
  disableOnInteraction: false,
  waitForTransition: true,
  stopOnLastSlide: false,
}

完整修改后的代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }
    
    .swiper-wrapper {
      transition-timing-function: linear!important;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 660px;
      background: red;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="swiper mySwiper">
    <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 class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
  </div>
<script
  src="https://code.jquery.com/jquery-3.7.0.min.js"
  integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
  crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>

  <script>
    const scrollc = new Swiper(".mySwiper", {
      spaceBetween: 40,
        effect: 'slide',
        loop: true,
        freeMode: true,
        slidesPerView: "auto",
        speed: 5000,
        allowTouchMove: false,
        autoplay: {
            delay: 5000,
            pauseOnMouseEnter: true,
            disableOnInteraction: false,
            waitForTransition: true,
            stopOnLastSlide: false,
        }
    });
    
    let isPaused = false;
    let savedPosition = 0;

    $(".mySwiper").on('mouseenter', function() {
      if (!isPaused) {
        savedPosition = scrollc.getWrapperTranslate('x');
        scrollc.wrapperEl.style.transition = 'none';
        scrollc.setWrapperTranslate('x', savedPosition);
        isPaused = true;
        console.log('slider paused');
      }
    });

    $(".mySwiper").on('mouseleave', function() {
      if (isPaused) {
        scrollc.wrapperEl.style.transition = 'transform 5000ms linear';
        const currentTranslate = scrollc.getWrapperTranslate('x');
        const diff = savedPosition - currentTranslate;
        scrollc.setWrapperTranslate('x', savedPosition - diff);
        isPaused = false;
        scrollc.autoplay.start();
        console.log('slider resumed');
      }
    });
    
  </script>
</body>

</html>

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