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.07k stars 595 forks source link

Flex parent around the carousel breaks sliding #1067

Open william-abboud opened 2 months ago

william-abboud commented 2 months ago

Is there an existing issue for this?

Code of Conduct

Question

Hey guys, first of all I want to congratulate you on the new 8th version of nuka and to tell you that I've been a delighted user of it so far.

I've hit one bump which I didn't see mentioned in the docs anywhere and that is that any time I have any DOM element wrapping my Carousel at whatever level above it it could be a direct parent, grandparent element etc. if any parent has display: flex or display: grid the carousel breaks and no longer slides.

Browser: Latest Chrome Nuka: v8.0.1 React: 18

Funny enough I came to that conclusion when I briefly swapped the nuka-carousel for Swiper where it calculated the width of each slide as some gigantic number and then I started digging and found out that I had a parent element with display: flex which was causing the issue.

william-abboud commented 1 month ago

One way to solve this is to set the flex basis on the slide item:

.your-slide-item {
  flex: 0 0 96px; /* replace with whatever size you would like the item to have or "auto" to extend fully */
  width: 100%; /* Ensures items take full width of the container */
}
carbonrobot commented 1 month ago

@william-abboud Do you have any example code you can share, I was unable to reproduce this locally.

william-abboud commented 1 month ago

I'll put something together these days.