如何在React/NextJs中实现Swiper轮播图无停顿连续自动播放？

我在Next.js的React组件中实现了Swiper轮播组件，当前支持自动播放，但每切换一张幻灯片就会暂停。想要实现无停顿的连续自动播放效果，现有代码如下：

<Swiper
            spaceBetween={0}
            loop={true}
            centeredSlides={true}
            speed={5000}
            autoplay={{
              delay: 0,
              disableOnInteraction: false,
            }}
            slidesPerView={6}
            modules={[Autoplay]}
            className="mySwiper"
          >
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
            <SwiperSlide>Slide 5</SwiperSlide>
            <SwiperSlide>Slide 6</SwiperSlide>
            <SwiperSlide>Slide 7</SwiperSlide>
          </Swiper>

解决方案 #

要实现无停顿的连续滚动，需要调整Swiper配置并配合CSS消除过渡顿挫，具体修改如下：

1. 调整Swiper核心配置

• 启用freeMode并关闭惯性，确保匀速滚动
• 设置slidesPerView: 'auto'自适应幻灯片宽度
• 添加waitForTransition: false让自动播放不等待过渡完成
• 调整speed控制滚动速度（数值越小滚动越快）

2. 添加CSS线性过渡样式

确保滚动全程速度均匀，无加速减速的顿挫感。

修改后的完整代码 #

import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';

export default function ContinuousSwiper() {
  return (
    <Swiper
      spaceBetween={0}
      loop={true}
      centeredSlides={false} // 关闭居中避免滚动偏移
      speed={3000} // 调整此值控制滚动速度，3000=3秒滚动一轮
      autoplay={{
        delay: 0,
        disableOnInteraction: false,
        waitForTransition: false, // 核心：不等待过渡完成就继续播放
      }}
      slidesPerView="auto" // 自适应幻灯片数量
      freeMode={true}
      freeModeMomentum={false} // 关闭惯性，保持匀速
      allowTouchMove={false} // 可选：禁用手动滑动（如需保留可删除）
      modules={[Autoplay]}
      className="mySwiper"
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      <SwiperSlide>Slide 5</SwiperSlide>
      <SwiperSlide>Slide 6</SwiperSlide>
      <SwiperSlide>Slide 7</SwiperSlide>
    </Swiper>
  );
}

配套CSS样式

.mySwiper {
  width: 100%;
}

.mySwiper .swiper-slide {
  width: auto; /* 让幻灯片内容决定宽度 */
  flex-shrink: 0; /* 防止幻灯片被压缩变形 */
}

.mySwiper .swiper-wrapper {
  transition-timing-function: linear !important; /* 关键：线性过渡，消除顿挫 */
}

关键配置说明 #

• waitForTransition: false：这是实现无停顿滚动的核心，让Autoplay跳过过渡等待，直接连续触发滚动
• transition-timing-function: linear：确保滚动过程速度均匀，没有快慢变化
• freeMode + freeModeMomentum: false：让Swiper处于自由滚动模式，关闭惯性，保持匀速移动
• slidesPerView: 'auto'：避免固定显示数量导致的滚动间隙，适配不同宽度的幻灯片

内容的提问来源于stack exchange，提问作者Minn Khant Naing