title: SlickSlider slick-center slide animation
body: <p>I have slider with transparent background and I would like to animate slider background when hovering center div, but after slider moves, hover effect stucks to all the slides that previously had the 'slick-center' class. Any suggestions how to fix it? Sp far I've tried:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="product-slider"&gt;
      &lt;div class="product-slider__content"&gt;
          &lt;div class="product-slider__item"&gt;
              &lt;img class="item__img" src="img.png" /&gt;
                  &lt;span class="item__price"&gt;Price&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="product-slider__item"&gt;
              &lt;img class="item__img" src="img.png" /&gt;
                  &lt;span class="item__price"&gt;Price&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="product-slider__item"&gt;
              &lt;img class="item__img" src="img.png" /&gt;
                  &lt;span class="item__price"&gt;Price&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="product-slider__item"&gt;
              &lt;img class="item__img" src="img.png" /&gt;
                  &lt;span class="item__price"&gt;Price&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="product-slider__item"&gt;
              &lt;img class="item__img" src="img.png" /&gt;
                  &lt;span class="item__price"&gt;Price&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="product-slider__background"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$('.product-slider__content').slick({
      slidesToShow: 3,
      centerMode: true,
      variableWidth: true,
      centerPadding: '0',
      draggable: true,
      infinite: true,
      swipe: true,
      swipeToSlide: true,
      arrows: true,
      autoplay: true,
      autoplaySpeed: 5000,
      speed: 800
  });
  
  $('.slick-center').hover(
      function() {
          $('.product-slider__background').stop().animate({
              backgroundPositionY: '-40px'
          });
      },
      function () {
          $('.product-slider__background').stop().animate({
              backgroundPositionY: '0'
          });
      }
  );
  </code></pre>
  
  <p>I tried setting 'currentSlide' variable onAfterChange but that does not fix it.</p>
  
  <p><a href="https://jsfiddle.net/es_kaija/3frkrfq1/1/" rel="nofollow noreferrer">JsFiddle.</a></p>
  
  <p>Any ideas? Thank you!</p>