Autoplay "start/stop" vs "pause/resume"

[tresorama]

HI, it's first time i use this library.

I cannot understand "pause/resume" and "stop/start" so I made a playground sandbox.

From what i can see "stop" will terminate current slide transition then pause the autoplay.
But "pause" does nothing that i can clearly see.

What "pause" is supposed to do? When is better to use it over "stop" ?

[dcsan]

@tresorama are you having any luck with autoplay? it seems flaky for me and often doesn't start autoplay until i drag to interact.

using this type of config:

import { Swiper, SwiperSlide, useSwiper } from 'swiper/react';
import { Swiper as SwiperInstance } from 'swiper'
import { Autoplay, Pagination, Navigation, Manipulation, Scrollbar } from 'swiper/modules';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';

import { SlideItem } from './SlideItem';
import { useEffect, useRef, useState } from 'react';
import {
  TradeItem
} from '../types';

export default function RevelSwiper(props: { slideItems?: TradeItem[] }) {
  // get instance of this swiper and save in a react ref
  const swiperRef = useRef<null | SwiperInstance>(null);

  useEffect(() => {
    // @ts-ignore
    // window.swiper = swiperRef.current;
    console.log('start')
  }, [])

  // const [count, setCount] = useState(0);
  // const [swiperRef, setSwiperRef] = useState();
  const swiperElem = useSwiper();

  function startSwiper(swiper: SwiperInstance) {
    // console.log('startSwiper', swiper)

    setTimeout(() => {
      if (swiper.destroyed) return;
      // @ts-ignore
      window.swiper = swiper;
      // @ts-ignore
      window.swiperElem = swiperElem;
      console.log('animate', swiper)

      // swiperRef?.current?.start();
      // swiper.start();
      swiper.autoplay.start();
      // swiper.autoplay.run();
      swiper.autoplay.resume();
      // swiperElem.start();
    }, 10000)
  }


  const slides = props.slideItems?.map((tradeItem: TradeItem) => {
    const key = `slide-${tradeItem.asset.id}`
    return (
      <SwiperSlide key={key} className='swiper-slide'>
        <SlideItem tradeItem={tradeItem} />
      </SwiperSlide>
    )
  })

  return (
    <div>
      <Swiper
        loop={true}
        autoplay={{
          delay: 1500,  // between slides
          disableOnInteraction: false,
          waitForTransition: false,

        }}
        pagination={{
          clickable: true,
        }}
        navigation={true}
        modules={[Autoplay, Pagination]}
        slidesPerView={5}
        spaceBetween={10}
        scrollbar={{ draggable: true }}
        onSwiper={(swiperInstance) => {
          // get instance of this swiper and save in a react ref
          if (!swiperInstance) return;
          swiperRef.current = swiperInstance;
          startSwiper(swiperInstance);
        }}
        className='swiper-outer'
      >
        {slides}
      </Swiper>
    </div>
  );
}

[tresorama]

It is not clear to me exactly what you are asking so I tried to do my best..

This is a playground with your code.

If the problem is that "loop" does not work because after the slider reached the last slide it "stops" cosnider this from the docs

---

If this is not your problem please share a sandbox that show what is not working...

[davidko5]

I found this issue trying to implement swiper autoplay controlld start/stop logic. I will leave my own implementation here since I wasn't able to find it anywhere.

import { type Swiper as SwiperType } from 'swiper/types';

export function StationCarousel(props: StationCarouselProps): ReactElement {
  const swiperRef = useRef<SwiperType | null>(null);
  
  return (
  <>
    <Swiper
          loop={true}
          direction="horizontal"
          autoplay={{
            delay: 1000,
            disableOnInteraction: false,
          }}
          // ... other props specific to my usecase
          // onSwiper prop is crucial in this situation
          onSwiper={(swiper) => (swiperRef.current = swiper)} // Store Swiper instance
        >
        //SwiperSlide components, etc.
   </Swiper>
   // Autoplay control
    <Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
        <Button
          variant="contained"
          onClick={() => swiperRef.current?.autoplay.start()}
        >
          Start Autoplay
        </Button>
        <Button
          variant="contained"
          onClick={() => swiperRef.current?.autoplay.stop()}
        >
          Pause Autoplay
        </Button>
      </Box>
     </>
  );
}