Open william-abboud opened 3 months 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 */
}
@william-abboud Do you have any example code you can share, I was unable to reproduce this locally.
I'll put something together these days.
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
ordisplay: 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.