react-slick: variableWidth on mobile device break the slider

Hey guys ! Thanks for this amazing plugin, it really rocks !

There seems to be a problem in the way the width of the slick-track div is calculated on mobile. This causes the slider to completly break on the first change of slide because the translation is also wrongly calculated.

My settings :

{
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: true,
    draggable: false,
    speed: 1000
}

This issue can be replicated when you switch to mobile view on https://codesandbox.io/s/react-slick-playground-1huh6.

The funny thing here is that if you just change the setting slidesToShow to 0, a javascript error is displayed but the width is rightly calculated!

Anyway, let me know if you find anything!

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Reactions: 1
  • Comments: 17 (1 by maintainers)

Commits related to this issue

Most upvoted comments

Not a real workaround, but I dropped react-slick completely in my project and switched to https://swiperjs.com/, which works perfectly well for me.

@roux1max Please send a PR