Animates and an image that you hover in a slick slider when you have multiple images

slick-slider-multiple-animate

  /* animates the slider images so that when you hover
  on an image the full width of image is animated
  */
  var imgParent, imgParentWidth, sizeDiff, sliderWidth;

  $('.slick-slide img').hover(function()
  {
    var imgWidth = $(this).innerWidth(); // actual width of hovered image
    imgParent = $(this).parent();  // get the parent element of hovered image
    imgParentWidth = imgParent.innerWidth(); // width of hovered iamge pared
    sizeDiff = imgWidth - imgParentWidth; //difference between parent width and img width
    imgParent.animate( //change the width of the parent element to the width of the actual image width
    {
      'width': imgWidth
    });
    sliderWidth = $('.slick-track').width(); //get the width of the entire slider
    $('.slick-track').width(sliderWidth + sizeDiff); //adjust slider size with size of difference

  }, function() //on hover off
  {
    imgParent.animate( 
    {
      'width': imgParentWidth //make width original width
    });
    $('slide-track').width(sliderWidth); //make entire slide size original size
  });