如何让Swiper幻灯片在React、NextJs上连续自动播放，而不是暂停播放

Question

我在react组件上(在NextJs上(实现了以下Swiper滑块。它会自动播放，但每次放映后都会暂停。我希望它能像(https://codesandbox.io/s/swiper-autoplay-shift-6z5jk1)一样不断地自动播放。如果你们找到了解决方案，请帮帮我。

<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>

Answer 1

在样式表中将transition-timing-function设置为linear可以解决您的问题。

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

或者你可以用程序做同样的事情：

<Swiper
...
onSwiper={(swiper) => {
swiper.$wrapperEl[0].style.transitionTimingFunction = "linear";
}}