Slick Js 删除其中一张幻灯片会导致跳过幻灯片

Question

我正在向 slicks 滑块添加一张幻灯片，当我移动到下一张幻灯片时，我想删除第一张幻灯片。这会导致其中一张幻灯片被跳过（当我向后移动时可以看到它出现，但当我尝试向前移动到最后一张幻灯片时却看不到）。现在我尝试使用 slick('slickGoTo') 强制 slick 移动到下一张幻灯片，但这没有效果。

$(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);

});

Fiddlelink: https://jsfiddle.net/fmxjL95p/

Answer 1

看来问题是因为你是运行你在 beforeChange 上的函数，Slick 保留的索引仍然指向上一张幻灯片（第一张幻灯片，在这个案件）。您可以让您的函数在正确的时间删除第一张幻灯片，方法是在 currentSlide === 0 时删除幻灯片 0（而不是代码中的 1）。

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

Slick Js 删除其中一张幻灯片会导致跳过幻灯片

Slickjs removing one of the slides causes to skip slide

javascript

jquery

slider

slick.js