Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Infinite: true not looping correctly

See original GitHub issue

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

Create a slider with 10 items
Set slidesToShow to 5 and slidesToScroll to 3 (main setting)
Set slidesToShow to 3 and slidesToScroll to 2 (responsive, breakpoint 850)
Set slidesToShow to 2 and slidesToScroll to 1 (responsive, breakpoint 425)
Load in a viewport > 850px wide
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

Issue Analytics

State:
Created 7 years ago
Reactions:3
Comments:10

Top GitHub Comments

2reactions

cinghamancommented, May 12, 2022

Strange 3+ yrs still no solution

0reactions

winniejocommented, Jun 11, 2022

using this worked

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

Top Results From Across the Web

Slick slider not looping correctly - Stack Overflow

Slick slider not looping correctly ... It is infinite: true by default, but adding it in makes no difference.

Infinite loops and break · CodeCraft-Python - BuzzCoder

Having the condition in your while loop always be True isn't necessarily bad in some situations. Sometimes these loops can simplify program logic...

[Resolved] My 'While Loop' is Infinite HELP - Codecademy

Initialize two variables, i and getToDaChoppa. i is a boolean value 'True', while getToDaChoppa is a function. When getToDaChoppa is called, the following...

Is while true an infinite loop? - Quora

In common parlance, yes, though “Infinite” is a bit of a misnomer. Unless true is reserved, read only or constant, you can just...

Intentional Infinite Loops - Incremental Java

An infinite loop occurs when a condition always evaluates to true. Usually, this is an error. For example, you might have a loop...