Autoplay timeleft restart issue

[SaidRasinlic]

Check that this is really a bug

• I confirm

Reproduction link

https://codesandbox.io/p/sandbox/y29vdk?file=/src/App.jsx

Bug description

I've been using your Autoplay demo code for React Swiper and have a problem with the timeleft restart.

Here is my code:

const progressCircle = useRef(null);
const progressContent = useRef(null);
const sectionRef = useRef(null);

const [controlledSwiperMain, setControlledSwiperMain] = useState(null);

const onAutoplayTimeLeft = (s, time, progress) => {
progressCircle.current.style.setProperty('--progress', 1 - progress);
progressContent.current.textContent = ${Math.ceil(time / 1000)}s;
};

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
// Access Swiper instance and call methods based on visibility
// Start or stop autoplay based on visibility
if (controlledSwiperMain) {
controlledSwiperMain.autoplayentry.isIntersecting ? 'start' : 'stop';
} else if (controlledSwiperMain) {
controlledSwiperMain.autoplayentry.isIntersecting ? 'start' : 'stop';
}
},
{ threshold: 0.5 },
);
observer.observe(sectionRef.current);
return () => {
observer.unobserve(sectionRef.current);
};
}, [controlledSwiperMain]); // Add controlledSwiperMain and swiper to dependencies

Here is my Swiper config:

  <Swiper
    onSwiper={setControlledSwiperMain}
    wrapperClass="mySwiperTwo-wrapper"
    slidesPerView={3}
    autoplay={{
      delay: 3000,
      disableOnInteraction: false,
    }}
    loop
    onAutoplayTimeLeft={onAutoplayTimeLeft}
    pagination={{
      clickable: true,
      el: '.swiper-pagination2', // Use a unique class name for pagination in this component
    }}
    navigation
    modules={[Autoplay, Pagination, Navigation]}
    className="mySwiperTwo"
  >

Expected Behavior

What I want: I want to create a feature when my Swiper container is visible in the viewport to make the autoplay ON but when it's not make it OFF because it's laggy. I need a way to restart timeleft when I call a swiperContainer.autoplay.stop(); because it doesn't restart itself by default...

Actual Behavior

What I get: On the first render it's counting 3 sec and I get normal expected behavior but after I scroll down out of the viewport and return, it seems like the count was still counting downwards and never stopped nor got restarted automatically, and that negative time reflected on my progress circle for example if I didn't return to the section for 10 sec the progress circle will show -10s even though the autoplay stopped sliding slides which means my IntersectionObserver works fine and the issue is not related to it!

Swiper version

"swiper": "^10.3.1"

Platform/Target and Browser Versions

Windows 10

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[SaidRasinlic]

Okay, I fixed it. Since stop never restarts time we start it initially and then just resume or stop based on entry.isIntersecting flag.

In case you encounter this issue this is a 100% working solution:

useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => {
if (swiperContainer) {
if (!swiperContainer.running) {
swiperContainer.autoplay.start();
}
swiperContainer.autoplay[entry.isIntersecting ? 'resume' : 'stop']();
}
},
{ threshold: 0.5 },
);
observer.observe(sectionRef.current);
return () => {
observer.unobserve(sectionRef.current);
};
}, [swiperContainer]);