Slides going to multiple lines with variableWidth: true

[aripekkako]

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

[rafaelcardososilva]

+1

[lorenzos]

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

[aripekkako]

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.

[lorenzos]

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

[TrebuhD]

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

[rus-yurchenko]

Same issue, needs to be fixed.

[omasback]

come on guys

[juanigallo]

It's a workaround but adding

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

[vuletiki]

It's a workaround but adding

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

Awesome, it worked for me!

[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.

[sgonv]

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.

[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?

[mathiasfc]

It's a workaround but adding

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

Perfect :ok_hand:

[yoyogi2989]

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

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

will work.

[coldice8]

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.

[ls-sam-leatherdale]

Still an issue in the latest version (0.26.0). Can confirm that it is the combination of slidesToShow and variableWidth that causes it.

[dgozen]

I still have this issue! When write in a flex-display my centering is off!

[pedegago]

It's a workaround but adding

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

This causes hide arrows in my carousel. :'(

[ghost]

It's a workaround but adding

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

Perfect!!!!!!!!!!!!!!! Thank you

[FernandoGOT]

It's a workaround but adding

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

Worked perfectly!