SlickSlider滑らかな中央のスライドアニメーション

Question

透明な背景を持つスライダがあり、中央のdivをホバリングしたときにスライダの背景をアニメーションしたいが、スライダの移動後、ホバリング効果は以前は滑らかな中心のクラス。どのようにそれを修正するための任意の提案？ Spはこれまで私が試した：

HTML：

<div class="product-slider"> 
    <div class="product-slider__content"> 
     <div class="product-slider__item"> 
      <img class="item__img" src="img.png" /> 
       <span class="item__price">Price</span> 
     </div> 
     <div class="product-slider__item"> 
      <img class="item__img" src="img.png" /> 
       <span class="item__price">Price</span> 
     </div> 
     <div class="product-slider__item"> 
      <img class="item__img" src="img.png" /> 
       <span class="item__price">Price</span> 
     </div> 
     <div class="product-slider__item"> 
      <img class="item__img" src="img.png" /> 
       <span class="item__price">Price</span> 
     </div> 
     <div class="product-slider__item"> 
      <img class="item__img" src="img.png" /> 
       <span class="item__price">Price</span> 
     </div> 
    </div> 
    <div class="product-slider__background"></div> 
</div> 

JS：

$('.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' 
     }); 
    } 
); 

を私は 'currentSlide' 変数onAfterChangeを設定しようとしたが、それはそれを修正しません。

JsFiddle.

任意のアイデア？ありがとうございました！

Answer 1

あなたはこれを試してみてください：

slidesToScroll：3

あなたのコードは次のようになります：

$('.product-slider__content').slick({ 
slidesToShow: 3, 
slidesToScroll: 3 
centerMode: true, 
variableWidth: true, 
centerPadding: '0', 
draggable: true, 
infinite: true, 
swipe: true, 
swipeToSlide: true, 
arrows: true, 
autoplay: true, 
autoplaySpeed: 5000, 
speed: 800 

}）;

Answer 2

多分これは誰かに役立ちます：私が正しくあなたの質問を解釈する場合

 $('.slick-slide').hover(
      function() { 
       if (!$(this).hasClass('slick-center')) { 
        return false; 
       } 
       if ($(this).hasClass('slick-center')) { 
        $('.product-slider__background').stop().animate({ 
         backgroundPositionY: '-5px' 
        }, 150, 'linear'); 
       } 
      }, 
      function() { 
       if (!$(this).hasClass('slick-center')) { 
        return false; 
       } 
       $('.product-slider__background').stop().animate({ 
        backgroundPositionY: '0' 
       }, 150, 'linear'); 
      } 
     ); 

Answer 3

は（中心の画像は、彼らが回転した後に一度推移間違って動作している？）

を私が言うことができるものから、センター-classはその子に追加されず、以前のもののままです。このようなものを試してみてください

$(".slick-center").ready(function() { 
    $(this).addClass("yourClassWithHoverFeature"); 
    that = this 
    setTimeout(function() { 
     $(that).removeClass('yourClassWithHoverFeature'); 
    }, 5000) 
}); 

それ以外の場合は、ホバークラスを使用してセンターアイテム（3が表示されている場合は2,5,8）などを追加してください。