[FIXED] How to make Swiper slides autoplay continuously on React, NextJs instead of playing with pause?

Issue

I implemented the following Swiper sliders on my react component (on NextJs). It does autoplay but pauses after each slide. I want this to autoplay continuously something like this (https://codesandbox.io/s/swiper-autoplay-shift-6z5jk1). Please help me guys if you have found out a solution for this.

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

Solution

Setting transition-timing-function to linear in your stylesheets solves your issue.

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

Or you can do the same thing programmatically:

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

Answered By - mythosil
Answer Checked By - - Robin (ReactFix Admin)