React-slick: Slider renders two rows of identical items if the number of items within the slider < slidesToShow

[JHolah]

I have a slick slider that renders dynamic items.

If the number of items returned is greater than the setting "slidesToShow", it works as expected.
If the number of items returned is equal, then it displays a row of items without nav, as expected.
If the number of items returned is lower, the slider renders two rows of identical items - the 'normal' items, and also a row of cloned items.

I can work around this quite simply by hiding the cloned row if the number of items returned is less than "slidesToShow", but I would rather that this wasn't rendered at all, obviously.

Is this a known issue?
Is there a setting or common fix that I have missed?

Demo here: https://codesandbox.io/s/5ko83z1kzn

[asela-wijesinghe]

+1

[Mrebai]

i worked around it by setting a fixed width and set overflow-y to hidden but it's so annoying behavior.

[feimosi]

Another workaround is to set slidesToShow dynamically:

slidesToShow={Math.min(images.length, 4)}

[tttt-conan]

I worked around by setting adaptiveHeight to true but there is still a glitch at first load

[shyam528]

Math.min(images.length, 4

But it is increasing the width of the slide.
I am getting one image from api and it is occupying the complete div area and I can't fix width because image size can be vary for different resoution.

[JHolah]

Math.min(images.length, 4

But it is increasing the width of the slide.
I am getting one image from api and it is occupying the complete div area and I can't fix width because image size can be vary for different resoution.

I also had the same issue. Got around it by creating invisible, empty items to fill the remaining space.

[uragecz]

Same problem, someone is working on solution.. ? Dynamic size of slideToShow changes width.. And playing with css around is kinda annoying / unreal if you want to have those items align to center right next to each other

[dj-neza]

Same problem - what is going on with this? why does Slick add some "cloned" elements?

[leokhramtsov]

is there a fix for this?

[topolanekmartin]

Please review this bug. Same problem here :(

[hector4213]

my heart weeps for a fix

[mymoto23]

Hope this gets fixed. as shyam528 explained, doing so automatically resizes each item which looks pretty bad in a designer's perspective. A workaround I can think of is to add dummy elements if the length of the items are less than the slidesToShow option- but this is annoying for developers to deal with if they're using custom elements or reusable components.

Math.min(images.length, 4

But it is increasing the width of the slide.
I am getting one image from api and it is occupying the complete div area and I can't fix width because image size can be vary for different resoution.