react-slick: slide width bug when upgrading to 0.14

I upgraded to 0.14 on my development environment today and my slides started getting very large width values and not showing multiple slides at once.

my settings:

settings = {
      dots: false,
      infinite: false,
      speed: 500,
      slidesToShow: 6,
      slidesToScroll: 6,
      waitForAnimate: false,
      // Resolutions
      responsive: [{
        breakpoint: 1510,
        settings: {
          slidesToShow: 6,
          slidesToScroll: 6
        }
      }, {
        breakpoint: 1025,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4
        }
      }, {
        breakpoint: 610,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      }, {
        breakpoint: 480,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }, {
        breakpoint: 321,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      }]
    };

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 1
  • Comments: 18 (5 by maintainers)

Commits related to this issue

Most upvoted comments

If you are using flex property, add the below in your css

* {
  min-height: 0;
  min-width: 0;
}

I am also seeing the same issue. On scroll in a parent div the translation calculation I am seeing some really interesting numbers. screen shot 2016-09-08 at 3 18 14 pm

UPDATE: it can’t be surrounded by flex… When i removed flex around now it works

Can you test out 0.14.2

@akiran I am also seeing this issue. I cloned your example and changed it to 2 slides to show.

Reproduceable steps:

@akiran I have a rough idea of what might be causing this, I’ll investigate further and submit a pull request in a few. Bear with me!

EDIT: see PR #469. I believe I’ve solved it, but I’ll take another look if this issue, or indeed any other issue, is still present.