-
-
Notifications
You must be signed in to change notification settings - Fork 246
Description
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:
- Initialize Embla with Autoplay (e.g., delay: 4000).
- Call autoplay.pause() after the current slide has been active for a partial duration.
- Manually change the slide (e.g., via scrollNext() or dragging).
- 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
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