In infinite mode, when slidesToShow equal to the length of slides, infinite functionality is not working.

akiran / react-slick

React carousel component

http://react-slick.neostack.com/

MIT License

11.76k stars 2.11k forks source link

In infinite mode, when slidesToShow equal to the length of slides, infinite functionality is not working. #1813

Closed amitk7407 closed 9 months ago

amitk7407 commented 4 years ago

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 commented 4 years ago

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.