Transition between last slide and first slide

[emanday]

Weird behavior for transition between last slide and first slide, or first slide and last slide.
And also transition between slides when you click on the indicators.

Steps to reproduce

The Flowbite carousel: https://flowbite.com/docs/components/carousel/ has a circular transition between last slide and first slide, but the https://www.flowbite-react.com/docs/components/carousel when arrives to the last slide and then you click to the next slide (so you can see the first slide), instead of showing the first slide it's showing the rest of the slides and then stops to the first one, like is scrolling through the rest of the slides.

Current behavior

The Flowbite React carousel does not have the same behavior like the Flowbite carousel.

Expected behavior

When I arrive to the last slide of the carousel and click next to see the first slide of the carousel,I would expect to see the first one as next and not see all the other slides until reaches to the first slide.

I would expect to have the same behavior for the Flowbite React carousel as it is for Flowbite carousel.

[MiroslavPetrik]

Likely there was another regression as currently the slides do not animate at all. I've experienced the issue as described in the previous version, maybe 0.6x or sooner.

By looking into the original flowbite animation we see that it simply rotates the 3 slides, namely left, middle and right. Its not perfect as when you click the arrows very fast, the animation has no time to finish and the slides jump from side to side.

I've replicated the same animation based on sliding window, and it works now the same as in original tailwind. Only difference that classes are switched by react, and not imperatively like in plain JS. See codesandbox for live demo
Still it needs to handle some edge cases like for 2 slides, it needs to copy one so there will be 3 at minimum.

There is one big difference with flowbite-react implementation which supports dragging (i don't see that supported in original flowbite). So note, that the demo has the dragging prop set to false. There is this problem in the underlying library that it does not support cycling the carousel out of the box, e.g. when you are at the left edge, you cannot 'drag from left to right'.
I've got one idea how to fix this - simply create 'placeholder copy' of the last slide on the left side, and the first slide on the right side. This is in the sandbox rendered when draggable = true. This would allow to drag the 'last slide' from the left and as it would finish, the underlying scroll ofset would have to be moved again clientWidth from the left, so we can drag again and again, like a pull to update mechanism kind of.

One last thing - also to prevent the jumping slides when the arrows are clicked too fast, we can debounce the click events, so we ignore those made while the slides are animated - 700ms interval. (can be configurable as well)