Resume autoplay after interaction

[ferferga]

Hello

I want to create an autoplay slider that works like Instagram Stories, where the autoplay is paused on interaction, instead of restarted, like in Swiper.

I want my slider to continue the autoplay where it left off after any interaction.

This is a:

• [x] enhancement

• [x] feature-discussion (RFC)

• Swiper Version: 5.4.1

• Platform/Target and Browser Versions: Chrome, Edge & Firefox.

What you did

• Set autoplay.disableOnInteraction to false
• Manually stop autoplay by calling swiper.autoplay.stop() after a touch event starts.
• Manually start autoplay by calling swiper.autoplay.start() after a touch event finishes.

(As suggested in #56)

Actual Behavior

• After any interaction, swiper starts the autoplay from zero in the slide that is visible.

[laugepetersen]

I totally agree. Looking for the functionality to RESUME and NOT RESTART. Something like:

mySwiper.autoplay.pause(); mySwiper.autoplay.play();

Not start/stop.

[DavidFlr1]

This enhancement is still required but if someone is still looking for a solution what I have done to solve it is build my own autoplay by using a timer and the slideNext() function of swiper, here I leave a simple and summarized example in react

Required

  import React, { useState, useEffect, useRef } from "react"
  import { Swiper, SwiperSlide } from "swiper/react";

Declare

  const [autoplay, setAutoplay] = useState(true)
  const refSlider = useRef()

 const settings = {
   speed: 3000, // your slider props
 }

  useEffect(() => {
    const interval = setInterval(() => {
      if(autoplay){ // we use a conditional to stop the slider on hover and restart on leave
        refSlider.current.swiper.slideNext() // or slidePrev()
      }
    }, 1); // with time on almost 0 and the speed of 3000 ms the transition is immediate but the time between transitions is 3s
    return () => clearInterval(interval);
  }, [autoplay]);

Component

  <div onMouseOver={() => setAutoplay(false)} onMouseLeave={() => setAutoplay(true)}>
    <Swiper {...settings} ref={refSlider}>
      <SwiperSlide>1</SwiperSlide>
      <SwiperSlide>2</SwiperSlide>
      <SwiperSlide>3</SwiperSlide>
    </Swiper>
  </div>

I think I didn't miss anything but you get the idea

[love2me]

Any update about this issue?