带5张图像的圆滑传送带-闪烁问题

Question

• 在CodePen Demo中单击“红色圆圈”（“下一步”按钮），您将看到右边的下一个图像正在添加闪烁的问题，尝试了所有无法解决的方法，请问有人。看看

• 单击后退按钮右侧相同的问题时也会发生同样的情况

$(function() {
  var docWidth, docHeight, winWidth, winHeight;
  var screenXs = 325;
  var screenSm = 600;
  var screenMd = 1040;
  var screenLg = 1280;
  var screenXLg = 1800;

  function createFilmStrip() {
    /* $(".filmstrip-carousel").each(function () {
        if ($(this).find(".slider").hasClass("slick-slider")) {
            $(this).find(".slider").find(".slick-slide").removeClass("slick-left slick-right slick-normal slick-middle slick-active slick-cloned");
            $(this).find(".slider").slick("unslick");
        } */

    /* $(this).find(".slider").slick({
        dots: false,
        infinite: false,
        slidesToShow: 5,
        centerMode: true,
        variableWidth: true,
        autoplay: false,
        centerPadding: '12%',
        adaptiveHeight: false,
        arrows: true,
        speed: 330
    }); */
    /* }); */
  }
  createFilmStrip();
  $(".slider").slick({
    dots: false,
    infinite: false,
    slidesToShow: 3,
    centerMode: true,
    variableWidth: true,
    autoplay: false,
    centerPadding: '10px',
    adaptiveHeight: false,
    arrows: true,
    speed: 330
  });

  function updateSlideScales(slick, currentSlide, nextSlide) {
    $.each(slick.$slideTrack[0].children, function(key, value) {
      $(this).removeClass("slick-left slick-right slick-middle slick-normal");

      var thisIndex = $(this).data("slick-index");

      if (thisIndex == nextSlide - 1) {
        shiftCard(this, "slick-left")
      } else {
        if (thisIndex == nextSlide + 1) {
          shiftCard(this, "slick-right")
        } else {
          if (thisIndex == nextSlide) {
            shiftCard(this, "slick-middle");
          } else {
            shiftCard(this, "slick-normal");
          }
        }
      }
    })
  }

  function shiftCard(clip, position) {
    $(clip);
    $(clip).addClass(position);
  }

  $(".filmstrip-carousel .slider")
    .on('afterChange init', function(event, slick, direction) {
      slick.$slides.removeClass('prevdiv').removeClass('nextdiv');
      for (var i = 0; i < slick.$slides.length; i++) {
        var $slide = $(slick.$slides[i]);
        if ($slide.hasClass('slick-current')) {
          $slide.prev().addClass('prevdiv');
          $slide.prev().prev().prevAll().addClass('prevdiv-1');

          $slide.next().addClass('nextdiv');
          $slide.next().next().nextAll().addClass('nextdiv-1');
          break;
        }
      }
    })
    .on("beforeChange ", function(event, slick, currentSlide, nextSlide, prevSlide) {
      if (!$(this).hasClass("non-overlapping")) updateSlideScales(slick, currentSlide, nextSlide);
      slick.$slides.removeClass('prevdiv').removeClass('nextdiv').removeClass('nextdiv-1').removeClass('prevdiv-1');
    });

  $(".filmstrip-carousel .slider").slick("slickGoTo", 0);
})