Ad

Slickjs Removing One Of The Slides Causes To Skip Slide

- 1 answer

I'm adding a slide to the slicks slider and when I move to the next slide I want to remove the first slide. This causes one of the slides to be skipped (it can be seen when i move backwards it appears but not when I try to move forwards to the last slide). Now I've tried to force slick to move to the next slide by using slick('slickGoTo') but this has no effect.

$(document).ready(function(){

 var boolRemove = 0;

$('.slider').on("beforeChange", function(event, slick,currentSlide,nextSlide ) {
     if(!boolRemove && currentSlide == 1) {
      $(".slider").slick("removeSlide", 0);
      boolRemove = 1;
    }
  });

  $('.slider').slick({
    dots: false,
    autoplay: false,
    infinite: false,
    arrows: true,
    speed: 0,
    slide: 'div',
    cssEase: 'linear'
    });

   $('.slider').slick('addSlide', $(".slick-slide:first-child").clone() , 0);

});

Fiddle link: https://jsfiddle.net/fmxjL95p/

Ad

Answer

It appears that the problem is that because you are running your function on beforeChange, the index that Slick is keeping is still pointing to the the previous slide (the first slide, in this case). You can have your function remove the first slide at the correct time by removing slide 0 when the currentSlide === 0 (instead of 1, as in your code).

$('.slider').on("beforeChange", function(event, slick, currentSlide, nextSlide ) {
     if(!boolRemove && currentSlide === 0) {
         $(".slider").slick("removeSlide", 0);
         boolRemove = true;
     }
});
Ad
source: stackoverflow.com
Ad