光滑显示下一张幻灯片的一半

Question

我正在尝试创建一个滑块，其中第一张幻灯片由第一张幻灯片的一半和下一张幻灯片的一半组成，但是当用户单击上一页/下一页时，该滑块应显示完整的幻灯片。

现在，我设法创建了该零件，并且可以正常工作，除了当我在第一张幻灯片上并尝试移动prev时，滑块动画似乎无效。

$(document).ready(function(){
  var boolRemove = 0;

  var slider = $('.slider').slick({
   'centerMode': false,
   'speed' : 300,
   infinite: false,
   cssTransition: true,
   draggable: false,
   initialSlide: 0,

  });

  $(".slick-list").addClass("half-slide");

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


    if(!boolRemove) {
      $(slick.$slides.slice(2,slick.$slides.length)).hide();
        setTimeout(function(){
          $(slick.$slides.slice(2,slick.$slides.length)).show();
        }, 350);

      $(".slick-list").removeClass("half-slide");


      boolRemove = 1;
    }

    console.log( currentSlide );
  });

  $(".slick-arrow").on("click", function(){
    if ($(".slider").slick("slickCurrentSlide") == 0) {
       $(".slick-list").removeClass("half-slide");
    }
  });

});

小提琴示例：

https://jsfiddle.net/brec38t0/1/