Fix white space flash during infinite scroll transition in AliceCarousel

[PatchLord]

Video:

Screen.Recording.2024-07-12.at.6.mp4

We're experiencing a white space flash when the carousel transitions from the last item to the first item during infinite scroll. This visual glitch disrupts the smooth user experience we're aiming for with our carousel implementation.

Current behavior:

• When the carousel reaches the last item and transitions to the first item (or vice versa), there's a brief moment where white space is visible.
• This flash occurs consistently during the infinite scroll transition.

Expected behavior:

• The transition between the last and first items (and vice versa) should be seamless, with no visible white space or interruption.
• The carousel should maintain a smooth, continuous appearance during all transitions, including the infinite scroll wrap-around.

Additional details:

• We're using react-alice-carousel version [insert version number]
• This issue occurs across different browsers and devices
• The problem is more noticeable on slower connections or less powerful devices

Potential causes:

• The way AliceCarousel handles cloning of edge slides for infinite scrolling
• Timing issues in the transition animation
• How the carousel calculates and applies the transformation during the transition

Steps to reproduce:

• Implement the carousel as shown in the provided code
• Enable infinite scroll and autoplay
• Observe the carousel as it transitions from the last item to the first

Any assistance in resolving this issue would be greatly appreciated. We're open to suggestions for workarounds or alternative implementations if a direct fix isn't immediately available.

Would you like me to explain or break down any part of this GitHub issue description?

[maxmarinich]

Hi, @jaimin-devx!
I'll try to sort this out in the near future.

Useful sources:
https://stackoverflow.com/questions/10134935/weird-css3-transition-flickering