Slider breaks when slidesToShow > number of slides

[selrond]

https://codesandbox.io/s/z3r5nopkm4

expected behavior: Slick (Add & Remove demo)

[laveesingh]

This is not a bug. This is the intended unslick behaviour.

[twgraham]

I also have this issue. I don't understand how this is not a bug unless react-slick doesn't intend to match the features of slick? As @selrond pointed to the particular slick demo showing this, when there is less slides than the specified slidesToShow, then the slider dots and arrows disappear, but the slide still take up as much room as if there were more slides. Right now we just get some weird shaped slides (see demo by @selrond). This forces me to put in 'dummy' slides so that it shows correctly.

e.g. slidesToShow = 3, if we have 1 slide, then I should expect to see 1 slide taking up 1/3 of the slider, and no slider dots/arrows

[binary-moon]

Please see my answer on #1196

[twgraham]

@binary-moon that's definitely a workaround, but not a fix. It also doesn't work well for responsive designs e.g. you might fit 7 slides in a large screen, and 1 slide in a small screen.

[binary-moon]

@twgraham Definitely not a fix, you are right. But it works until the devs fix it (or it looks like they prefer the current behaviour). You can easily write media queries for other screen size combinations as well.

[MickeyKay]

@akiran any plans to fix this issue?

[mustkem]

Kindly assist what to do in this case. Manual fix is the only option?

[fnebenfuehr]

Wasn't an issue in 0.21.0. Revert to this previous version to temporary fix the issue.

[andre-matulionis-ifood]

Came into the same problem today. Apparently, react-slick show both the slides and its "clones" if infinite is true and slidesToShow greater than number of slides https://codesandbox.io/s/p7mnmvy0rx

[FSM1]

this is all quite frustrating to deal with, and having to keep track of the number of slides provided to ensure that we do not try and show more slides is a pain.

[daton89]

In my case it's broken even if slidesToShow <= number of slides, enabling responsive options:

I have 3 slides and I want to show 1 on small screens and 2 on tablets and desktops:

  const settings: Settings = {
    dots: true,
    arrows: true,
    adaptiveHeight: true,
    infinite: false,
    lazyLoad: 'ondemand',
    slidesToShow: 2,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 512,
        settings: {
          slidesToShow: 1,
          arrows: false,
        },
      },
    ],
  }

So the slider render 2 slides first and then when rerender to show only 1 slide the content of the Slider is not rendered anymore. This doesn't happens if we remove arrows false to responsive settings on small screens.

[vitlcoder]

Add it to css

<style>
    .slick-track,
    .slick-list {
        width: 100%;
        min-width: 100%;
    }
</style>

[GoutamShanbhag]

@vitlcoder Thank you, this solution worked for me.

[LeVuMinhHuy]

hello excuse me ? any progress on this ? I have to set:

.slick-list {
    min-height: `${MY_CARD_HEIGHT}px`;
 }