fix(carousel): enable autoplay plugin options #8484
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
andonMouseLeave
handlers to manually control the autoplay plugin, rather than leveraging the plugin's built-in options:The autoplay plugin has an option for
stopOnMouseEnter
so these aren't necessary. Also, callingreset()
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:stopOnInteraction
isfalse
, callreset()
to restart the autoplay timerstop()
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:
stopOnInteraction: false
for continuous autoplayonMouseEnter
/onMouseLeave
handlers and replace withstopOnMouseEnter: true