SlickSlider光滑中心幻灯片动画

我有透明背景的滑块，我想在滑动中心div时为滑块背景设置动画，但是在滑块移动后，悬停效果会映射到以前具有“光滑中心”类的所有幻灯片。任何建议如何解决它？ SP到目前为止，我已经试过：SlickSlider光滑中心幻灯片动画

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.

任何想法？谢谢！

来源

2017-09-04 Kristine

-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

}）;

来源

2017-09-04 08:55:18

我需要通过1张幻灯片滚动。 – Kristine

减少数量为1作为幻灯片ToScroll：1 –

好吧，但这并不能解决我的'幻灯片中心'的问题。动画仍然适用于所有幻灯片。 – Kristine

也许这可以帮助别人：

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

来源

2017-09-04 10:46:09 Kristine

如果我正确地解释你的问题（中心图像行为不当后，他们已经旋转后徘徊？）

从我可以告诉，中心-class不附加到该孩子，仍然保留在之前。尝试像这样

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

否则，只需在悬停类中添加中心项目（2,5,8如果显示3）等。

来源

2017-09-04 10:52:36 Joel

SlickSlider光滑中心幻灯片动画

回答

相关问题