Swiper.js自动播放问题：鼠标悬停无法暂停

问题分析 #

你当前的Swiper配置里缺少pauseOnMouseEnter参数，加上设置了delay: 0的连续滚动模式，默认自动暂停逻辑可能失效；另外Webflow的DOM层级可能存在遮挡，导致鼠标事件没触发到目标容器上。

解决方案 #

方案1：完善Swiper的autoplay配置 #

直接在autoplay对象中添加pauseOnMouseEnter: true，显式声明悬停暂停规则，修改后的配置如下：

autoplay: {
  delay: 0,
  disableOnInteraction: false,
  pauseOnMouseEnter: true, // 鼠标悬停时暂停自动播放
  pauseOnMouseLeave: true  // 鼠标离开时恢复播放（默认已开启，显式声明更稳妥）
},

方案2：手动绑定鼠标事件（针对连续滚动场景） #

如果方案1无效，可能是delay:0的连续滚动模式导致默认逻辑不生效，手动给Swiper容器绑定鼠标事件：
在Swiper初始化代码之后，添加以下内容：

// 获取Swiper容器
const swiperContainer = document.querySelector('.slider-wrapper');

// 鼠标悬停暂停
swiperContainer.addEventListener('mouseenter', function() {
  slider_wrapper.autoplay.stop();
});

// 鼠标离开恢复
swiperContainer.addEventListener('mouseleave', function() {
  slider_wrapper.autoplay.start();
});

方案3：检查Webflow的DOM层级 #

在Webflow设计器中确认.slider-wrapper容器没有被其他透明元素（如交互层、绝对定位元素）遮挡，调整元素的z-index或位置，保证鼠标能直接触发容器的hover事件。

完整修改后的代码 #

整合所有修改后的最终代码：

<style>
.slider-list{
  -webkit-transition-timing-function: linear !important;
  -o-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}
</style>

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://weblocks.io/library.js"></script>

<script>
$(document).ready(function () {
  var slider_wrapper = new Swiper(".slider-wrapper", {
    wrapperClass: "slider-list",
    slideClass: "slider-item",
    navigation: {
      nextEl: '.next-slide',
      prevEl: '.prev-slide',
    },
    pagination: {
      type: 'bullets',
      el: '.pagination',
      clickable: true,
    },
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
      pauseOnMouseEnter: true,
      pauseOnMouseLeave: true
    },
    speed: 7500,
    slidesPerView: 'auto',
    loop: true
  });

  // 手动绑定鼠标事件（备用）
  const swiperContainer = document.querySelector('.slider-wrapper');
  if(swiperContainer) {
    swiperContainer.addEventListener('mouseenter', () => slider_wrapper.autoplay.stop());
    swiperContainer.addEventListener('mouseleave', () => slider_wrapper.autoplay.start());
  }
});
</script>

注意事项 #

• 确保使用的是最新版Swiper，旧版本可能存在参数兼容问题；
• 在Webflow发布后测试，预览模式下可能存在事件绑定延迟；
• 若习惯使用jQuery，也可以用$(swiperContainer).hover()替代原生事件绑定，效果一致。

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