Set duration for autoplay in Swiperjs-CodePudding

I'm making a slides components in React that has autoplay enabled. I want the autoplay to stop after 5 seconds. Is there any way to do this?

Here is my code

import 'swiper/css'
import 'swiper/css/pagination'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay} from "swiper";
import { logos } from './logos'

export const SliderComponent => {
  <Swiper
     direction={"vertical"}
     className="mySwiper"
     speed={100}
     autoplay={{
        delay: 10,
        disableOnInteraction: false,
     }}
     modules={[Autoplay]}
    >
     {logos.map(logo=>{
       return (<SwiperSlide key={logo.id}>
         <img src={logo.img} alt="logos" className='object-contain w-full' />
       </SwiperSlide>)
     })}
  </Swiper>
}

I was tring to make a slot machine like animation that stops after 5 seconds.

CodePudding user response：

This answer is for if you want to stop slide for a time after n moves. I will write another answer for stop autoplay after n seconds.

Step 1: You need to use onSlideChange event

Step 1: You need a state count which will track how many slide changed on every slide change.

Step 2: When the count will be 5 you need to reset the count state, and have to stop autoplay. And need to use setTimeout where after 5 second the autoplay will start again.

import 'swiper/css'
import 'swiper/css/pagination'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay} from "swiper";
import { logos } from './logos'

export const SliderComponent => {
  const [count, setCount] = useState(1);

  <Swiper
     direction={"vertical"}
     className="mySwiper"
     speed={100}
     autoplay={{
        delay: 10,
        disableOnInteraction: false,
     }}
     onSlideChange={(swiper) => {
        if (count === 5) {
          setCount(1);
          swiper.autoplay.stop();
          setTimeout(() => {
            swiper.autoplay.start();
          }, 5000);
        } else {
          setCount((prev) => prev   1);
        }
     }}
     modules={[Autoplay]}
    >
     {logos.map(logo=>{
       return (<SwiperSlide key={logo.id}>
         <img src={logo.img} alt="logos" className='object-contain w-full' />
       </SwiperSlide>)
     })}
  </Swiper>
}

CodePudding user response：

If you stop the time for after 5 seconds, You need to follow the steps -

Step 1: You need to use onSwiper and onSlideChange event

Step 2: You need to tract the time on swiper initialization.

Step 3: On every slide change you have to check if the time is more than 5 seconds depending on you init time. If yes then stop the autoplay.

import 'swiper/css'
import 'swiper/css/pagination'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay} from "swiper";
import { logos } from './logos'

export const SliderComponent => {
  const [count, setCount] = useState(1);

  <Swiper
     direction={"vertical"}
     className="mySwiper"
     speed={100}
     autoplay={{
        delay: 10,
        disableOnInteraction: false,
     }}
     onSlideChange={(swiper) => {
        const time = Date.now();
        if (time > startTime   5000) {
          swiper.autoplay.stop();
        }
     }}
     onSwiper={() => setStartTime(Date.now())}
     modules={[Autoplay]}
    >
     {logos.map(logo=>{
       return (<SwiperSlide key={logo.id}>
         <img src={logo.img} alt="logos" className='object-contain w-full' />
       </SwiperSlide>)
     })}
  </Swiper>
}