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

[juanigallo]

It’s a workaround but adding

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

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