title: Slick js half slide on the first slide
body: <p>I'm trying to show half of the last slide and half of the first slide when a user sees the slider but when I try to slide to the next slide for a brief of second image from the 3rd slide appears.
  What I'm doing is assigning a padding to the slick-list and remove it when the users slides to the next slide.</p>
  
  <pre><code>$(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'
    });
  
  });
  
  </code></pre>
  
  <p>example fiddle:
  <a href="https://jsfiddle.net/02q1xuzc/" rel="nofollow noreferrer">https://jsfiddle.net/02q1xuzc/</a></p>