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