Skip to content

Conversation

columk1
Copy link

@columk1 columk1 commented Oct 16, 2025

Description

Fixes #8390

This PR enables the carousel component to properly respect autoplay plugin options, particularly stopOnInteraction, which was ignored before.

Issue

stopOnInteraction: true in the autoplay plugin options was not working. It's the default setting and should stop autoplay when the previous or next button is clicked, as per the Embla Carousel docs. If it is false, the autoplay delay should reset on interaction, which wasn't happening either.

Additionally, the documentation examples were hardcoding onMouseEnter and onMouseLeave handlers to manually control the autoplay plugin, rather than leveraging the plugin's built-in options:

onMouseEnter={plugin.current.stop}
onMouseLeave={plugin.current.reset}

The autoplay plugin has an option for stopOnMouseEnter so these aren't necessary. Also, calling reset() after autoplay has been stopped doesn't restart it, so this wasn't restarting the autoplay as intended.

A third issue was that the autoplay timer wasn't being reset when the next or previous buttons were clicked, which is the default behaviour in Embla's examples.

These bugs prevented users from configuring the autoplay behavior according to their needs.

Solution

Carousel Component

Added an onButtonClick handler which takes the api as a parameter to check the plugin's options:

  • If stopOnInteraction is false, call reset() to restart the autoplay timer
  • Otherwise, call stop() to stop autoplay (default behavior)

This brings the implementation in line with how it's done in the Embla Carousel documentation examples. It will also play well with dots/progress when they are added. There are some PRs open for the dots feature that either don't address the timing issue or have manual calls to reset(), but calling reset indiscriminately won't respect the autoplay options. This handler can be added to any navigation function and will respect those options.

Carousel Examples

Updated carousel plugin example to:

  • Use stopOnInteraction: false for continuous autoplay
  • Remove manual onMouseEnter/onMouseLeave handlers and replace with stopOnMouseEnter: true
  • Let the plugin handle the behavior

Copy link

vercel bot commented Oct 16, 2025

@columk1 is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Contributor

Looks like this PR modifies files in apps/www, which is deprecated.

Consider applying the change to apps/v4 if relevant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug]: Carousel Interaction Options Don't Work Due to Buttons Being Outside of Carousel

1 participant