Swiper 10 实现无缝滚动 marquee 且点击不中断自动播放

2026-01-26 00:00:00 作者：心靈之曲

使用 swiper 10 构建自动滚动的图片跑马灯（marquee）时，即使设置了 disableoninteraction: false，点击含链接的滑块仍会暂停轮播——根本原因在于 freemode: true 与 autoplay 冲突；移除该选项即可恢复点击不暂停行为。

在 Swiper 10 中，freeMode 模式允许用户以非对齐方式自由拖拽滑块，但其内部机制会主动监听并响应所有交互事件（包括鼠标点击和触摸），无论 disableOnInteraction 如何配置，freeMode: true 都会强制覆盖 autoplay 行为，导致点击即暂停。这是 Swiper 官方文档中明确指出的设计约束（见 Swiper Autoplay API），并非 Bug。

因此，解决该问题的关键不是调整参数组合，而是移除与

autoplay 不兼容的 freeMode。以下是修正后的完整初始化代码：

const swiperContainer = document.querySelector('.swiper');
const swiper = new Swiper(swiperContainer, {
  autoHeight: true,
  slidesPerView: 3,
  loop: true,
  loopSlides: 6,
  autoplay: {
    delay: 1,              // 极小延迟实现“无缝”视觉效果
    disableOnInteraction: false, // 确保点击/悬停不暂停
    pauseOnMouseEnter: false     // 可选：鼠标移入也不暂停（增强 marquee 感）
  },
  speed: 6000,             // 总体滚动动画时长（毫秒），越长越慢
  allowTouchMove: false,   // 禁用触控拖拽（保持纯自动滚动）
  // ⚠️ freeMode: true 已移除 —— 这是核心修复点
});

配套 CSS 需保持线性过渡以匹配 marquee 效果：

.swiper-wrapper {
  transition-timing-function: linear !important;
}
.swiper-wrapper {
  display: flex;
}
.swiper-slide {
  height: 200px;
  width: 200px;
  overflow: hidden;
}
.swiper-slide img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

✅ 注意事项：

delay: 1 是实现“无停顿滚动”的关键：Swiper 会将极短延迟视作连续触发，配合 speed: 6000 可形成平滑匀速效果；
若需支持移动端点击跳转，确保标签层级正确（如示例中包裹在 .swiper-slide 内），且 allowTouchMove: false 不影响链接点击（它仅禁用滑动，不影响原生点击事件）；
loop: true 和 loopSlides 建议设为实际 slide 数量的整数倍，避免循环衔接处出现空白或卡顿；
如需更精细控制（如鼠标悬停暂停），请显式设置 pauseOnMouseEnter: false（默认为 true），避免意外中断。

总结：Swiper 的 freeMode 与 autoplay 在设计上互斥，构建纯自动 marquee 场景时应主动规避 freeMode，专注通过 speed、delay 和 disableOnInteraction 组合实现预期行为。