wrapAround behavior is not seamless when items visible is greater than number of items

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.06k stars 593 forks source link

wrapAround behavior is not seamless when items visible is greater than number of items #916

Closed zdolin closed 2 years ago

zdolin commented 2 years ago

Describe Your Environment

What version of nuka-carousel are you using? v5.1.2
What version of React are you using? React 17.0.2 (also 18.0)
What browser are you using? Chrome

Describe the Problem

Codesandbox: https://codesandbox.io/s/cranky-sea-j5uszw

Expected behavior: Carousel wrapAround behavior appears as seamless when hitting Next/Prev Actual behavior: Cloned slides appear in a delayed/buggy fashion when hitting Next/Prev (especially Prev), with gaps appearing in the slide row.

zdolin commented 2 years ago

@ValGeorgiev any thoughts on this one?

zdolin commented 2 years ago

I noticed that the amount of total items in the carousel must be at least double the number of slidesToShow in order to loop without gaps or buggy movement.

ValGeorgiev commented 2 years ago

Understand the issue. There are potential ways of fixing this, but will require a lot of effort. I will try to find some time to work on it.

Out of curiosity, is this a production scenario? It's not great to have duplicated visible elements on the screen, that was the main reason we didn't work on it from the beginning.

zdolin commented 2 years ago

@ValGeorgiev thanks for your reply and understood re: level of effort. This isn't a production scenario, but we'd need to use another lib unless this is fixed since we will eventually be deploying to production. Originally we had 12 items in the carousel, which worked nicely, but now there are only 4, so the carousel exhibits the buggy behavior-- particularly when scrolling left/prev.