React-slick: In infinite mode, when slidesToShow equal to the length of slides, infinite functionality is not working.
demo: https://codesandbox.io/s/react-slick-playground-yjk35?file=/index.js
Even after using { arrows: true, dots: true, infinite: true} when slideToShow equals to the length of slides, no pre/post cloned slides are being rendered which usually happens when infinite is set to true. Arrows and Dots are also not being rendered in this case.
amitk7407
All 4 comments
Hi,
I have got a workaround for this issue, so sharing it thinking it may help.
Suppose, slidesToShow = totalSlides = 3, then instead of passing 3 to slidesToShow, we can pass 2.99 which will show arrows and dots and add cloned slides. And if you are using centerMode: true, then the slides in this case will not be centered so for this, add css like:
.slick-slide {
transform: translate(100%, 0);
}
This will move your slide by 1 which works in case of 3 visible slides. You can translate based of your number of visible slides.
amitk7407
on 11 Jun 2020
+1, I have the same issue. The workaround method from @amitk7407 is working 馃憤
quyctd
on 6 Aug 2020
+1, SAME ISSUE
MatheusR42
on 11 Mar 2021
Same issue. Although @amitk7407 solution made my slider infinite.. it doesn't look good because it is cut
stressed-pet-owner
on 29 Mar 2021
Related issues
BradyEdgar94
路
3Comments
slashwhatever
路
3Comments
enriquelopez-atlas
路
3Comments
walker-jiang
路
3Comments
briziel
路
3Comments
Most helpful comment
Hi,
I have got a workaround for this issue, so sharing it thinking it may help.
Suppose,
slidesToShow = totalSlides = 3, then instead of passing3toslidesToShow, we can pass2.99which will show arrows and dots and add cloned slides. And if you are usingcenterMode: true, then the slides in this case will not be centered so for this, add css like:.slick-slide { transform: translate(100%, 0); }This will move your slide by 1 which works in case of 3 visible slides. You can
translatebased of your number of visible slides.