Zooooooom - unexpected behavior when manually setting `slideIndex` from last slide to first slide

[ruslanfarutdinov]

Describe Your Environment

• What version of nuka-carousel are you using? 4.7.0
• What version of React are you using? 16.13.1
• What browser are you using? Chrome
• What machine are you on? Mac

Describe the Problem

In my project I need to create autoplay like behavior but with each slide having different duration, and therefore autoplayInterval doesn't fit my needs since autoplayInterval will set the same interval for all slides. So in order to get around this, I'm manually controlling slideIndex and using setTimeout (see sandbox bellow). However, when I manually set slideIndex and try to create the wrapAround-like behavior (seamless transition from last slide to the first slide) by setting the slideIndex to 0 when the last slide has been reached, the carousel visually goes from the last slide to the first slide (very quickly). See the following sandbox for a visual representation of the issue: https://codesandbox.io/s/stoic-albattani-9sr4t.

Expected behavior: I would expect the same behavior as when the wrapAround flag has been set to true - seamless transition from last slide to the first slide, without noticing anything. Actual behavior: The carousel visually goes from the last slide to the first slide (very quickly).

Is there a way around this?

[pmbuban]

Also experiencing this but a lot of issues were closed saying it was previously fixed. Perhaps the bug was reintroduced more recently?

[sarmeyer]

@ruslanfarutdinov - thank you for submitting this issue and providing a demo. How are you determining which slides have which duration? It might be possible to dynamically set autoplayInterval depending on the slideIndex (if you know which slideIndex will have which duration). Just a thought for now while I look into this more.

@pmbuban - can you link those issues? I don't think I've heard of this one before

[pmbuban]

@sarmeyer I'm referencing this wrapAround issue that discusses the flickering. Not entirely sure if it's related but my issue is the same as what @ruslanfarutdinov mentioned above

[fritz-c]

Here's an example of a variable autoplayInterval to solve the issue you originally intended to tackle: https://codesandbox.io/s/variable-autoplayinterval-nuka-carousel-ohsoub?file=/src/App.js

As for avoiding zooming, it's an inherent issue that we cannot differentiate between setting slideIndex={0} with (a) the intent to move one slide forward from the end and (b) the intent to zooooom all the way back to the start (as in a custom "go to first slide" button, etc.). But there is actually a way to differentiate between those two intents: you could set slideIndex={numberOfSlides} where you would usually use 0 when wrapping around, and while numberOfSlides is seemingly not a valid index, it carries the intent that we want to move forward, but also end up back at the first slide. Right now it's a bit janky if you actually use that in your code (janky index-exceeding demo), but I'm optimistic that a soon-to-be-released update will clean it up.

[fritz-c]

Actually, it looks like that previous version was not all that janky, and a demo using the current nuka-carousel version works just fine with it as well. Going to close this issue.