search

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.02k stars 597 forks source link

Fixed width for slides does not behave responsively #927

Closed rngyn closed 1 year ago

rngyn commented 1 year ago

Bugs and Questions

Describe Your Environment

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?

rngyn commented 1 year ago

Would anyone from the nuka carousel team be able to look into this? Thanks

ValGeorgiev commented 1 year ago

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)

rngyn commented 1 year ago

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.

mrsamse commented 1 year ago

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.

rngyn commented 1 year ago

Is there anyone that could look into this?

allypalanzi commented 1 year ago

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.

allypalanzi commented 1 year ago

is there any update on if this could be addressed?

vaishal commented 1 year ago

Hey all, I’m working on implementing slideWidth into v5. Thanks for the codesandbox example @rngyn.

allypalanzi commented 1 year ago

amazing, thanks!

svanetten1976 commented 1 year ago

@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

allypalanzi commented 1 year ago

I think we need them to release V6 to get this feature. @vaishal any idea when V6 will be released?

vaishal commented 1 year ago

@allypalanzi I’m no longer involved with this project though @gksander may be able to provide more info.

gksander commented 1 year ago

CC @fritz-c – do you per chance know anything about the status of this?