nuka-carousel
nuka-carousel copied to clipboard
FormidableLabs
Fixed width for slides does not behave responsively
Bugs and Questions
Describe Your Environment
- What version of nuka-carousel are you using? 5.1.3
- What version of React are you using? 18.0.0
- What browser are you using? Chrome
Describe the Problem
https://codesandbox.io/s/brave-wing-6ml10g
Expected behavior: Slides should keep their fixed width with consistent spacing in-between when resizing the window. More cards should show as the window gets wider, but cards should always have the same width and spacing. Actual behavior: Slides seem to be flexed and spacing in-between will change to keep slidesToShow consistent. When window is narrow (mobile) slides bundle up and overlap each other.
Additional Information
In v4, I was able to get this working with slideWidth, which has been deprecated. I have a carousel of fixed width (280px) cards which consistent cell spacing (14px) that the user can click next to scroll through horizontally. There was no need for slidesToShow because the cards just fill up the carousel depending on the width. So if the width of the window is large, more cards are shown. If it's smaller, less cards are shown but they're always 280px wide with 14px spacing. How do I get this behavior on v5?
Hey @rngyn What is the reason to have fixed width for the slides? How this behaves on mobile or tablet?
On the other side the goal of nuka-carousel v5 is to be mobile first and responsible as possible. Fixed width is not recommended, we are pushing for responsive content that can be easily visible and accessible on any device by just manipulating how many slides you want to display (slidesToShow property)
Hi @ValGeorgiev, thanks for responding. The reason I need a fixed width for the slides is that its contents and styling are bound to this fixed width (think of the slides as cards). These cards stay 280px wide and are always 14px apart from one another. Ideally on mobile I'd like to see the cards still be 280px but show less cards in the carousel versus a wider screen. The carousel parent itself still behaves responsively, but the slides do not.
If you take a look at the codesandbox I linked above (v5), widening the window causes the spacing in-between the cards to increase, while narrowing the window causes the cards to overlap.
Here's how I want it to behave using v4: https://codesandbox.io/s/inspiring-butterfly-wtm9sg
As you can see, the cards itself stay as-is regardless of the window size. It's just the carousel that behaves responsively and when the parent container shrinks, it just shows less cards, but the sizing and spacing of the cards remain unaffected. Can this behaviour be mimicked in v5 at all? If not, I'll have to unfortunately stay on v4 for my project.
Let me know if I need to clarify anything else, but the v4 codesandbox I believe is sufficient in showing the behaviour I want for v5. Thanks so much for your continued support.
This is exactly the functionality I am missing in v5 at the moment. If someone could take a look at this so that fixed widths could be assigned, I would be very grateful.
same, this is the same issue i'm looking for. i don't know how many slides i want to show on any given screen size, i just know what width i want my slides to be and want whatever can fit to show.
Hey all, I’m working on implementing slideWidth into v5. Thanks for the codesandbox example @rngyn.
@rngyn ir @allypalanzi did you ever end up trying this after the #985 was merged? I still can't get this feature to work in 5.4.0. I am stuck on 4.8.4 because of this, the fix in this update doesn't seem to do it. My use case is exactly the same as yours @rngyn -- Steve
I think we need them to release V6 to get this feature. @vaishal any idea when V6 will be released?
@allypalanzi I’m no longer involved with this project though @gksander may be able to provide more info.
