Question

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

2022-11-01

2289

reactjs next.js swiper.js

我在我的 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";
  }}