Skip to content

[Bug]: (autoplay pauseDelay is not cleared after calling reset() #1300

@yangfancn

Description

@yangfancn

Which variants of Embla Carousel are you using?

  • embla-carousel (Core)
  • embla-carousel-react
  • embla-carousel-vue
  • embla-carousel-svelte
  • embla-carousel-autoplay
  • embla-carousel-auto-scroll
  • embla-carousel-solid
  • embla-carousel-auto-height
  • embla-carousel-class-names
  • embla-carousel-fade
  • embla-carousel-docs (Documentation)
  • embla-carousel-docs (Generator)

Steps to reproduce

const emblaApi = EmblaCarousel(viewportNode, [Autoplay({ delay: 4000 })]);
const autoplay = emblaApi.plugins().autoplay;

// 1. Start autoplay and let it run for 2 seconds
setTimeout(() => {
    // 2. Call pause() - this captures ~2000ms into 'pauseDelay'
    autoplay.pause();

    // 3. Manually go to the next slide
    emblaApi.goToNext();

    // 4. Call reset() play() expecting a fresh 4000ms timer
    autoplay.reset();
    autoplay.play();

    // 5. Observe the timeUntilNext() value
    console.log(autoplay.timeUntilNext()); 
    // It returns ~2000ms instead of the expected 4000ms
}, 2000);

Steps:

  1. Initialize Embla with Autoplay (e.g., delay: 4000).
  2. Call autoplay.pause() after the current slide has been active for a partial duration.
  3. Manually change the slide (e.g., via scrollNext() or dragging).
  4. Call autoplay.reset() to restart the timer for the new slide.

Expected Behavior

When autoplay.reset() is called, the internal pauseDelay should be cleared (null).

The timer should restart with the full duration defined in the plugin options (e.g., 4000ms), ensuring that the new slide stays visible for the intended amount of time regardless of when the previous slide was paused.

Additional Context

The root cause lies in the reset() implementation within the Autoplay plugin. Currently, reset() only triggers startAutoplay(), but it does not nullify the pauseDelay variable.

Since getDelay() prioritizes pauseDelay over the default delay option, the plugin "remembers" the remaining time from the previous slide even after a manual transition or a deliberate reset.

function reset(): void {
  pauseDelay = null; // Ensure the timer starts fresh
  if (autoplayRunning) startAutoplay();
}

This fix is particularly important for developers implementing progress bars, as the inconsistent timeUntilNext() value causes the UI to jump or finish prematurely after a manual interaction.

What browsers are you seeing the problem on?

No response

Version

v9.0.0-rc01

CodeSandbox

https://codesandbox.io/p/devbox/embla-carousel-autoplay-vanilla-forked-q5y56l?workspaceId=ws_QCcYqdHVcA36wToQgygZ82

Before submitting

  • I've made research efforts and searched the documentation
  • I've searched for existing issues
  • I agree to follow this project's Contributing Guidelines for bug reports

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions