Sponsored issue: Infinite Loop Renders Duplicate Slides When SlideToShow is Less Than the Number of Slide Elements

[usmanasif]

When enabling the infinite loop feature on Slick Carousel in React, it appears to render duplicate slides if the slidesToShow prop is set to a value greater than the total number of slide elements passed as children. The duplication occurs, and although the duplicated slides have different data-index values, it leads to unexpected behavior in certain scenarios.

Steps to Reproduce:

1. Include the Slick Carousel component in a React project.
2. Set the infinite prop to true.
3. Set slidesToShow to a value greater than the total number of slide elements.
4. Observe the rendered output

Expected Behaviour:
The infinite loop should work seamlessly without duplicating slides, even when slidesToShow is greater than the total number of slides. It should only not show next and previous button and show single dot.

Environment:
Slick Carousel Version: "^0.29.0"
React Version: "18.2.0"

Priority Support

• @usmanasif is using Mintycode to fund this issue.
• If you would like to accept bounty for solving this issue join Mintycode.
• Thank you in advance for helping.