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

6mw9ycah 于 2022-11-04 发布在 React

关注(0)|答案(1)|浏览(142)

我在我的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>

reactjs

来源：https://stackoverflow.com/questions/74282089/how-to-make-swiper-slides-autoplay-continuously-on-react-nextjs-instead-of-play

1条答案

按热度按时间

qgelzfjb1#

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

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

或者，您可以通过编程方式执行相同的操作：

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

赞(0）回复(0）举报 2022-11-04

我来回答

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

1条答案

相关问题

热门标签

最新问答