Infinite looping bug with variable width

[jerairrest]

Once you reach the end of the defined number of slides, the images / slides that are supposed to show afterwards disappear for a couple slides until there are no more slides to scroll.

[simeydotme]

You have a JSFiddle to demonstrate, please? :)

[Mistraval]

https://jsfiddle.net/2sc2718r/2/

I spoke with Ken Wheeler directly which at that time confirmed the bug.

[amylcole87]

I am having the same problem and its very annoying and may mean we have to use a different carousel for our product please can you fix asap

[evalunamain]

@jerairrest I'm not sure about your exact implementation, but is it absolutely necessary that slidesToShow is 1? I've found that setting it to at least half of your number of slides (2 in this case) solves the issue. Or, well, at least hacks a way around it: https://jsfiddle.net/2sc2718r/3/

(PS. images get blurry when you're scaling up from their original size (your transform: scale(1.07). You might want to scale them down in their original state instead, and then scale to 1.0 when they're active.)

[Mistraval]

@evalunamain Your jsfiddle still demonstrates the issue. If you let it sit, once the first slide reaches the Recurring Orders banner, all kinds of glitchiness occurs to the right-most slide.

[FONH2]

` $('.slick--optionset--carousel-arrows-dotless-unlimite', context).once('slick_unlimited').each(function (index, element) { var slider = $(element);

    var active_class = "slick_slide__active"; // 3 center slides
    var current_class = "slick_slide__current"; //current active slide

    var first_slide = true; //is it first slide

    slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {

      // onChange, remove the trick class
      $('.slick--optionset--carousel-arrows-dotless-unlimite').each(function (index, selement) {
        $(selement).removeClass("slick-first-slide");
      });

      // trick the parameter. when current=0 and next=2, tell script that next is 1
      // avoiding the double image passed on first change
      // reset (be sure)
      if (first_slide == true) {
        first_slide = false;
        if (currentSlide == 0 && nextSlide == 2) nextSlide = 1;

      }

      var jSlides = $('.slide', $(this));
      jSlides.find('.b-lazy').each(function (index, element) {
        window.ptBlazy.load(element, true);
      });

      var jNextSlide = $(slick.$slides.eq(nextSlide));

      jNextSlide.addClass(current_class + ' ' + active_class);
      jNextSlide.prev().addClass(active_class);
      jNextSlide.next().addClass(active_class);
      jSlides.not([
        jNextSlide[0],
        jNextSlide.prev()[0],
        jNextSlide.next()[0]
      ]).removeClass(current_class + ' ' + active_class);

      jSlides.not([
        jNextSlide[0],
      ]).removeClass(current_class);
      //fix for infinite looping

      if (currentSlide == 0 && nextSlide > 1) {
        //previous
        var jCurrentSlide = $(slick.$slides.eq(currentSlide));
        jCurrentSlide.addClass(active_class);
        jCurrentSlide.prev().addClass(active_class + ' ' + current_class);
        jCurrentSlide.prev().prev().addClass(active_class);
      }
      if (currentSlide + 1 == slick.slideCount && nextSlide == 0) {
        //next
        var jCurrentSlide = $(slick.$slides.eq(currentSlide));
        jCurrentSlide.addClass(active_class);
        jCurrentSlide.next().addClass(active_class + ' ' + current_class);
        jCurrentSlide.next().next().addClass(active_class);
      }
    });

    slider.on('afterChange', function (event, slick) {
    });

    slider.on('setPosition', function (event, slick) {
      var jSlide = slick.$slides.eq(slick.currentSlide);
      jSlide.addClass(current_class + ' ' + active_class);
      jSlide.prev().addClass(active_class);
      jSlide.next().addClass(active_class);
    });

    slider.on('init reInit', function (event, slick) {

      // we init or reInit, be sure to apply the special trick class for
      // mobile first image display
      $('.slick--optionset--carousel-arrows-dotless-unlimite').ready(function () {
        $('.slick--optionset--carousel-arrows-dotless-unlimite').each(function (index, selement) {
          $(selement).addClass("slick-first-slide");
        });
      });
    });
  });
}

} `

Got a way to trick that, but center mode have to be used with the "half items number" trick. So what you have to do is set your slider as center mode, slide to show half of the items that are in your slider (So center mode will center it properly without a weird margin left cause of slic kapplying a translate on the slider trying to center it considering SlideToShow). With the code above that should fix your problem. I am using Slick with drupal via the UI so please consider that it can be a bit different from the other slick versions.