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

10次阅读

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

使用 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; }

注意事项

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

text=ZqhQzanResources