Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
amitk7407 opened this issue Jun 1, 2020 · 7 comments · May be fixed by blakegreendev/blakegreen-dev#229, hucen0077/tianji#2, Khushalsaboo108/Project#5, Shiazy18/netflix-clone#2 or raverecursion/Streamable---A-Disney-Plus-Lookalike#209
Closed

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

amitk7407 opened this issue Jun 1, 2020 · 7 comments · May be fixed by blakegreendev/blakegreen-dev#229, hucen0077/tianji#2, Khushalsaboo108/Project#5, Shiazy18/netflix-clone#2 or raverecursion/Streamable---A-Disney-Plus-Lookalike#209

Comments

@amitk7407
Copy link

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
Copy link
Author

amitk7407 commented Jun 11, 2020 •
edited
Loading

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.

@quyctd
Copy link

quyctd commented Aug 6, 2020 •
edited
Loading

+1, I have the same issue. The workaround method from @amitk7407 is working 👍

@MatheusR42
Copy link

+1, SAME ISSUE

@stressed-pet-owner
Copy link

Same issue. Although @amitk7407 solution made my slider infinite.. it doesn't look good because it is cut

https://share.getcloudapp.com/jkuL1n97

@TanelMarran
Copy link

TanelMarran commented Nov 29, 2022 •
edited
Loading

+1, same issue.

@rjsdnql123 rjsdnql123 mentioned this issue Jan 24, 2024
Closed
@rjsdnql123
Copy link
Contributor

It has been resolved in the latest version! Now you can use infinite even when 'element' and slideToShow are the same.

akiran added a commit that referenced this issue Jan 25, 2024
@akiran
added tests for #1813
5b2e405
@akiran
Copy link
Owner

akiran commented Jan 25, 2024

Fixed in react-slick@0.30.0

@akiran akiran closed this as completed Jan 25, 2024
@blakegreendev blakegreendev mentioned this issue May 24, 2024
Open
@jeremyjohns10 jeremyjohns10 mentioned this issue May 28, 2024
Closed
@hucen0077 hucen0077 mentioned this issue May 29, 2024
Open
@Khushalsaboo108 Khushalsaboo108 mentioned this issue Jun 6, 2024
Open
@IrvingYHM IrvingYHM mentioned this issue Jul 9, 2024
Closed
@Shiazy18 Shiazy18 mentioned this issue Jul 22, 2024
Open
@raverecursion raverecursion mentioned this issue Sep 12, 2024
Open
@AnanyCodemaya AnanyCodemaya mentioned this issue Oct 24, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
7 participants
@akiran @MatheusR42 @amitk7407 @quyctd @TanelMarran @rjsdnql123 @stressed-pet-owner