Infinite: true not looping correctly

[ehansen723]

Given a slider with 10 items, slidesToShow = 5, slidesToScroll = 3, and infinite = true, When I reach the end of the slider (viewing items 07 08 09 10 01) When I click the "Next" arrow I see items 06 07 08 09 10 instead of items 10 01 02 03 04

[ http://jsfiddle.net/n195kyfz/ ]

Steps to reproduce the problem

1. Create a slider with 10 items
2. Set slidesToShow to 5 and slidesToScroll to 3 (main setting)
3. Set slidesToShow to 3 and slidesToScroll to 2 (responsive, breakpoint 850)
4. Set slidesToShow to 2 and slidesToScroll to 1 (responsive, breakpoint 425)
5. Load in a viewport > 850px wide
6. Click the next arrow 3 times

What is the expected behaviour?

Page load shows items: 01 02 03 04 05

"Next" Click 1 shows items: 04 05 06 07 08

"Next" Click 2 shows items: 07 08 09 10 01

"Next" Click 3 shows items (expected): 10 01 02 03 04

What is observed behaviour?

Page load shows items: 01 02 03 04 05

"Next" Click 1 shows items: 04 05 06 07 08

"Next" Click 2 shows items: 07 08 09 10 01

"Next" Click 3 shows items (actual): 06 07 08 09 10

More Details

• Which browsers/versions does it happen on? Firefox, Chrome, possibly others. Only happening on desktop but might have to do with my responsive slidesToShow/Scroll settings.
• Which jQuery/Slick version are you using? jquery-rails (~> 3.1.2), Slick Version: 1.4.1
• Did this work before? Unknown, haven't tried a multi-item infinite carousel before

[leggomuhgreggo]

I made an even more reduced test case to confirm.

Man infinite is so tricky.

[RadGH]

I'm having this issue also. I'm guessing there's some errors in the math with a combination of infinite and scrolling a specific number of pages. I have the same results with:

13 slides

.slick({ slidesToShow: 6, slidesToScroll: 4, infinite: true });

[DividingByZero]

I can confirm this same issue. Doesn't look like this has been updated.

infinite: true, slidesToShow: 4, slidesToScroll: 2,

with an odd number of slides (like 5) it gets out of wack after the first slide. If I bump the number of slides to an even number, it works fine (like 6).

[shivanit2]

Any solution to this?

[jaredshaunsmith]

this is also a problem for me. can confirm that it only happens when there is an odd number of slides, using infinite: true, and centerMode: true

[semy]

Any News regarding this issue @leggomuhgreggo ?

[ShellyB734]

I am having the same problem.

[i-am-al-x]

I can refine the problem description, and suggest a workaround.

I observed this problem when the total slide count is not an even multiple of 'slidesToScoll'. The work-around is to remove slides until slide_count % slidesToScroll === 0. See also more detail and my warning against 'slickAdd' usage at my comment on issue #3841 ; which addresses the same issue.

[cinghaman]

Strange 3+ yrs still no solution

[winniejo]

using this worked

    dots: false,
loop:true, 
    vertical: true,
    centerMode: false,
    slidesToShow: 4,
    slidesToScroll: 1,
autoplay:true,
autoplaySpeed:3300,

	 

[Tan-Sc]

I am having the same problem!!!.

[i-am-al-x]

See my comment of Nov 2019, above. The workaround is to manipulate the total number of slides, adding blank slides until the "slide_count" is divisible by "slidesToScroll"; in other words: slide_count MODULO slidesToScroll equals zero. It is sad that after all this time, no real solution has been found, and that a workaround is still required.

[Karasevgen1205]

Hello everyone I have a solution, although at first glance it will seem a little complicated: on the project in which I encountered this problem, it was necessary to use this slider with certain parameters, because of which this bug appeared, I went into the library itself and in the file "https://github.com/akiran/react-slick/blob/master/src/utils/innerSliderUtils .js" string "else if (slideCount % slidesToScroll !== 0) final Slide = slideCount - (slideCount % slides To Scroll);" I replaced it with "else if (slideCount % slides To Scroll !== 0) final Slide = slide Count + target Slide;" and also the line "else if (slideCount % slides To Scroll !== 0) final Slide = 0; " I replaced it with "else if (slideCount % slides To Scroll !== 0) final Slide = target Slide - slideCount;" now everything works correctly in the endless scrolling mode. In general, you can get rid of the "react-slick": "^0.28.1" in package.json, download the source code and make your custom slider based on it.

[Erraoudy]

I am having the same issue!!!.

[arskhatri5]

I was having same issue! If you have total 5 items then just show items 4 that's it!

infinite: true, dots: false, speed: 300, autoplay: true, autoplaySpeed: 2000, slidesToShow: 4, slidesToScroll: 1,

Thanks!

[bkmahapatra]

dots: false,
infinite: true,
speed: 1500,
slidesToShow: 4,
slidesToScroll: 1,
centerMode: false, //___
autoplay: true,
autoplaySpeed: 2000,
cssEase: "linear",

Simply set the centerMode to false, and give it a try; it worked for me.