
在 swiper 10 中实现无缝滚动式跑马灯(marquee)时,即使设置了 `disableoninteraction: false`,点击含链接的滑块仍会中断 autoplay —— 根本原因是 `freemode: true` 与 autoplay 冲突,禁用该选项即可恢复自动播放连续性。
Swiper 的 freeMode 模式允许用户以非吸附式、惯性滑动的方式自由拖拽容器,但它会强制接管交互逻辑:一旦检测到任何指针事件(包括点击 标签),Swiper 就会认为用户主动介入,并默认暂停 autoplay(即使 disableOnInteraction 设为 false)。这是 Swiper 10 的底层行为设计,并非配置遗漏。
✅ 正确解法是 移除 freeMode: true,并配合其他参数确保流畅滚动效果:
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 // 额外加固:鼠标悬停也不暂停
},
speed: 6000, // 高速平滑过渡(单位:ms)
allowTouchMove: false, // 完全禁用触摸拖动,避免干扰 autoplay
// ⚠️ 移除了 freeMode: true ← 关键修正!
});同时,CSS 层需保持线性过渡以匹配跑马灯节奏:
.swiper-wrapper {
transition-timing-function: linear !important;
}
.swiper-slide {
height: 200px;
width: 200px;
overflow: hidden;
}
img {
width: 100%;
height: 200px;
object-fit: cover;
}? 注意事项:
- delay: 1 是模拟“无间隔”滚动的关键,但实际最小有效值通常为 10–50ms(过低可能被浏览器节流);
- 若需保留部分交互能力(如 hover 效果),务必添加 pauseOnMouseEnter: false,否则鼠标移入仍会暂停;
- allowTouchMove: false 在移动端会禁用所有手势滑动,若需兼顾触控体验,可改用 watchSlidesProgress: true + 自定义 touch 处理,但会显著增加复杂度;
- 所有 标签点击将正常跳转,且不会触发 Swiper 的 autoplay 中断。
总结:Swiper 10 的 autoplay 与 freeMode 天然互斥。构建稳定跑马灯的核心原则是——放弃自由拖拽,拥抱受控轮播。移除 freeMode 后,disableOnInteraction: false 才能真正生效,实现「可点击、不暂停、不间断」的工业级 marquee 行为。










