如何实现Swiper.js无停顿连续滚动（跑马灯式滑动）

问题原因分析 #

你的代码出现停顿的核心原因：

1. centeredSlides={true} 开启了居中模式，Swiper每次切换后会强制将滑块居中定位，这会产生明显停顿
2. 默认freeMode参数带有的惯性，配合autoplay时会出现滚动后的短暂停滞
3. speed值设置过小（1000），切换动作完成过快，后续autoplay触发的间隙会被感知为停顿

修改后的代码实现 #

<div className="w-100 mt-lg-0 mt-2">
  <Swiper
    loop
    grabCursor
    // 配置freeMode，关闭惯性，保持匀速滚动
    freeMode={{
      enabled: true,
      momentum: false,
    }}
    // 调整speed控制滚动速度（值越大，滚动越慢，按需修改）
    speed={3000}
    slidesPerView="auto"
    spaceBetween={30}
    // 移除居中模式，避免强制定位停顿
    // centeredSlides={true}
    autoplay={{
      delay: 0,
      disableOnInteraction: false,
      // 鼠标悬停时不暂停滚动（可选，按需调整）
      pauseOnMouseEnter: false,
    }}
    // 增加额外克隆滑块数量，避免循环时出现空白
    loopAdditionalSlides={data.length}
    breakpoints={{
      "@0.00": {
        spaceBetween: 10,
      },
      "@0.75": {
        spaceBetween: 20,
      },
      "@1.00": {
        spaceBetween: 40,
      },
      "@1.50": {
        spaceBetween: 50,
      },
    }}
    modules={[Autoplay]}
    // 移除未使用的分页、导航模块，减少性能消耗
    className="mySwiper rounded-4 hero-swiper"
  >
    {data.map((item, index) => (
      <SwiperSlide key={index}>
        <div className="max-w-screen-xl mx-auto">
          <div className="bg-black">{item.title}</div>
        </div>
      </SwiperSlide>
    ))}
  </Swiper>
</div>

额外样式优化（可选） #

如果滚动仍有细微停顿，可添加CSS强化连续效果：

.mySwiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

关键调整说明 #

• 移除centeredSlides：取消居中定位，让滑块保持连续排列滚动
• 配置freeMode.momentum: false：关闭滑块惯性，确保滚动匀速无停顿
• 增大speed值：控制整体滚动速度，避免切换动作过快导致的间隙感
• 设置loopAdditionalSlides：克隆足够数量的滑块，保证循环滚动时无缝衔接
• 移除无用模块：如果不需要分页器和导航，从modules中移除Pagination、Navigation，减少性能消耗

内容的提问来源于stack exchange，提问作者Md. Fakwer Uddin Mazumder