Infinite Loop strange looping behaviour on restart, not seamless?

[BB-000]

short description of the bug / issue, provide more detail below.

When looping slides, with 'slidesToScroll' set to something more than 1, the last slide goes back on itself for some reason. Then (separate issue really) it does a massive jump to the beginning slide. Should it not be 'infinite'? i.e. not scroll all the way backwards to #1. (This also happens with 'slidesToScroll' set to 1)

====================================================================

https://codepen.io/bananafarma00/pen/VwZrpNq

( note: used codepen, as jsfiddle starting pen provided was broken 'Uncaught TypeError: $.type is not a function' )

https://codepen.io/bananafarma00/pen/PoYOmbP Example with 'slidesToScroll' = 1. Still jumps back from last slide to first slide

====================================================================

Steps to reproduce the problem

1. Make a simple 'infinite' slider 2: Set 'slidesToScroll' to something >1
2. Watch the last slide and when it restarts

====================================================================

What is the expected behaviour?

It should loop normally, without jumping backwards randomly? And last slide > first slide shouldn't scroll backwards through all previous slides? Simple 'seamless' loop example http://output.jsbin.com/ufoceq/8/

====================================================================

What is observed behaviour?

It jumps backwards on the last slide for some reason, then jumps backwards really fast to the first slide. This looks noticeably very weird?

====================================================================

[BB-000]

Just found this similar/same issue https://github.com/kenwheeler/slick/issues/2234

[LubomirKurpel]

Having the same problem. I wanted inactive slides to be css transform: (0.9) and active transform: scale(1) and now it jumps, marks all of them inactive and active in a second which result in a weird bug. Any solution to this?

[i-am-al-x]

Same problem, with refinement, plus a WORK-AROUND.

I can refine the problem description. Rather than "'slidesToScroll' = 1", the actual problem seems to be "slide_count % slidesToScroll !== 0". (The percent sign '%' represents modulo). When the total number of slides is evenly divisible by 'slidesToScroll', the problem does not occur, otherwise the problem does occur. The problem is that the slide show will revert, reset, jump, jerk, restart, whatever you want to call it.

The work-around is add or remove slides so that the slide count is an even multiple of 'slidesToScroll'.

I recommend removing rather than adding, because (as of today, 2019-Nov-22) the .slickAdd function has a problem; which has been described in a separate bug report. When using .slickAdd, the current bug forces a work-around of wrapping the slide in a double nesting of 'divs'. So, for example, myHtml would need to be "<div><div>" + myHtml + "</div></div>".

var myHtml = '<div style="height:100px;width:100px;background-color:yellow;"></div>';
var modulo = itemCount % slidesToScroll;
var more = slidesToScroll - modulo;
while(more--) {
  $(myCarouselEl).slick('slickAdd',"<div><div>" + myHtml + "</div></div>");
}

[irvanherz]

Hello, I've just got same issue. But then I found this problem caused by CSS customization. In my case, this custom CSS could made carousel doesn't working properly at infinite mode:

.mycarousel .slick-track {
  transition: transform 0.4s; /* <--- this */
}

[irvanherz]

https://codepen.io/bananafarma00/pen/VwZrpNq

Everything goes fine if I removed min-width: 200px;

[winniejo]

using this worked :)

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

[Erraoudy]

same issue here

[webprom]

Avoided the bug by making slidesToShow and slidesToScroll either the same qty or slidesToScroll=1