react-slick Slides going to multiple lines with variableWidth: true

Problem

When using variableWidth: true the track width is miscalculated when one (or more) of the slides are wider than the container. This results in the track contents overflowing to multiple lines (and the slider becoming very high).

Original slick tackles this by setting the slideWidth always to 5000px when variableWidth is used (cf. https://github.com/kenwheeler/slick/blob/a2aa3fec335c50aceb58f6ef6d22df8e5f3238e1/slick/slick.js#L2081)

Example from examples

This is visible in this example, when you resize the window: https://react-slick.neostack.com/docs/example/variable-width

screen shot 2018-05-23 at 14 59 38

May 23 '18 12:05 aripekkako

+1

May 30 '18 18:05 rafaelcardososilva

Same issue here, but I don't think the proposed PR is good, unfortunately.

Jun 09 '18 13:06 lorenzos

Hi @lorenzos, I discussed the reasoning for this fix in this Twitter thread https://twitter.com/APKoponen/status/1002111012059930624, but I'll reiterate it here.

The original slick.js library had a more "robust" implementation for calculating the width of the variable width slides, but it was removed here as it had multiple issues. Not using a fixed value is likely to cause similar issues also with this react implementation.

The fixes this issue for 90% of the cases and is a much better option than the current broken behavior. Also, it is only a small, 1 line change in the code, which is easy to review. As you might have noticed, the contributors & owners of this library are quite busy so I'll settle with this fix, if we could get even it to be merged.

If someone is interested in creating a better solution and thoroughly testing it with multiple corner cases they are free to do it, but I would like to see this first fix merged first and not wait for something that is quite likely not to happen.

Jun 11 '18 07:06 aripekkako

@aripekkako Got it. I didn't know the "story" behind the issue. Thanks for explaining it to me.

Jun 11 '18 11:06 lorenzos

A workaround is to carefully tweak breakpoints like in the responsive example, but it needs to be fixed.

Sep 20 '18 09:09 TrebuhD

Same issue, needs to be fixed.

Oct 17 '18 11:10 rus-yurchenko

come on guys

Nov 02 '18 00:11 omasback

It's a workaround but adding

display: flex to slick-track class seems to fix this issue

Dec 21 '18 23:12 juanigallo

It's a workaround but adding

display: flex to slick-track class seems to fix this issue

Awesome, it worked for me!

Apr 03 '19 02:04 vuletiki

It's a workaround but adding

display: flex to slick-track class seems to fix this issue

How did you override the default display ?

I'm importing slick css in document head.

Jun 19 '19 02:06 jmayergit

It's a workaround but adding display: flex to slick-track class seems to fix this issue

How did you override the default display ?

I'm importing slick css in document head.

+1

I'm using css module, but importing slick css in document head.

So I don't know how to add display: flex to slick-track class :(

When I add display: flex using Chrome dev tools, it works.

Jun 24 '19 04:06 sgonv

It's a workaround but adding

display: flex to slick-track class seems to fix this issue

@J-Gallo How did you override that css class? Could you help me?

Jun 24 '19 04:06 sgonv

It's a workaround but adding

display: flex to slick-track class seems to fix this issue

Perfect :ok_hand:

Nov 29 '19 18:11 mathiasfc

@sgonv When using css module, just use :global operator. In this case,

:global {
    .slick-track {
        display: flex;
    }
}

will work.

Dec 20 '19 10:12 yoyogi2989

If you set the settings config's variableWidth is true, and set slidesToShow, then such the problem may occur. You can try to remove slidesToScroll when setting variableWidth is true.