光滑的js半张幻灯片在第一张幻灯片上

Question

当用户看到滑块时，我试图显示最后一张幻灯片的一半，而第一张幻灯片的一半，但是当我尝试滑动到下一张幻灯片以显示来自第三张幻灯片的简短第二张图像时，我试图显示。 我正在做的是为滑动列表分配一个填充，并在用户滑动到下一张幻灯片时将其删除。

$(document).ready(function(){

  $('.slider').on("init", function(event, slick,direction ) {
    $( '.slick-list' ).addClass("half-slide");  
  });

  $('.slider').on("beforeChange", function(event, slick,direction ) {
    $( '.slick-list' ).removeClass("half-slide");
  });

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

});

小提琴示例： https://jsfiddle.net/02q1xuzc/