FormidableLabs/nuka-carousel

Flex parent around the carousel breaks sliding

Opened this issue · 3 comments

william-abboud commented

Is there an existing issue for this?

  • I have searched the existing issues

Code of Conduct

  • I agree to follow this project's 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

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

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

william-abboud commented

I'll put something together these days.