FormidableLabs / nuka-carousel

Small, fast, and accessibility-first React carousel library with an easily customizable UI and behavior to fit your brand and site.
https://commerce.nearform.com/open-source/nuka-carousel
Other
3.02k stars 597 forks source link

fix: correct autoplay timing when wrapAround=true #954

Closed fritz-c closed 1 year ago

fritz-c commented 1 year ago

Description

The autoplay timing is uneven when wrapAround is true. Note the extra pause after one loop through this demo.

There are a couple choices I made for this PR that I would like to share, as I can change them pretty easily before merging if we want to.

Choice 1: Autoplay timing

In the released code as well as in this PR, if you have an animation that takes 500ms (via speed={500}) and autoplayInterval={1000} , the first slide will be shown for 1000ms, after which the autoplay timeout begins at the same time the animation starts. Following the 500ms for the animation to play out, the subsequent slides are only shown holding still for 500ms a piece.

(Each segment ("|    |" or "|====|") is 500ms, X marks the beginning of the autoplay timeout/animation)

Choice 1A (existing behavior)
Animation        |    |    |X===|    |X===|    |X===|
Autoplay Timeout |X===|====|X===|====|X===|====|X===|====
Slide Still      |====|====|    |====|    |====|    |====

Choice 1B (alternate behavior)
Animation        |    |    |X===|    |    |X===|    |
Autoplay Timeout |X===|====|    |X===|====|    |X===|====
Slide Still      |====|====|    |====|====|    |====|====

In this PR, I chose the existing behavior, 1A.

Choice 2: Autoplay pausing

When the carousel is paused by hovering over it with the default pauseOnHover={true} and then unpaused, you have an option of how to handle the interrupted timeout.

In this PR, I chose the alternate behavior, 2B, because it seemed more appropriate for the "pause" wording that is used.

Type of Change

How Has This Been Tested?

I created an integration test that simulates the carousel autoplay timing, and makes sure everything fires at the expected time.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
nuka-carousel ✅ Ready (Inspect) Visit Preview Aug 15, 2022 at 1:58PM (UTC)