Question: The slick is not working when the item is less than slidesToShow

[Dityath]

I dont know why but my slider is not working fine when the slides item less than the slidesToShow, it just became stacked like a css grid, and how to make the slide become just a single slider (or make it into multiple slider that less than slidetoshow) when this happens? or maybe any other tips?

codesandbox: CodeSandBox

[Leolik]

I have exactly the same problem ( problem with infinite: true

[pioneiro]

I got a similar problem, when the slides are less than slidesToShow, the slides doubled and stacked upon each other, I tried to remove infinite: true but that didn't worked. Also I tired the code from documentation, the same problem occured. Can anyone confirm is it only problem of mine or everyones.

[belachkar]

@Leolik @pioneiro @Dityath The same issue. It's due to the duplicates or clones created even when no need for them (with the class slick-cloned).

• The clones must not be created when the Nbr of items < slidesToShow in the settings.

[gi-batalha]

I had the same problem here. The slides doubled and stacked upon each other when there's less items than the value set on slidesToShow property

[Vixy88]

Any update on this one, we are having the same issue?

[Vixy88]

We fixed this now by adding flex:1 to the .slick-list class

& .slick-list { flex: 1; }

[AlbertRF147]

The problem persists. I fixed it with:

.slick-slide.slick-cloned {
  display: none;
}

[ahmadmustafeen]

i fixed it by conditionally turning infinite scroll to false

<Slider dots={true} infinite={slides.length >= 3} speed={500} slidesToShow={3} slidesToScroll={1} >

[akiran]

Yes, slides can't be less than slidesToShow You have to fix it with conditional logic as @ahmadmustafeen suggested