jquery - Slick Slider slick-center 幻灯片动画

Question

我有透明背景的 slider ，我想在悬停中心 div 时为 slider 背景制作动画，但在 slider 移动后，悬停效果会卡在所有以前具有“光滑中心”类的幻灯片上。任何建议如何解决它？ 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'
        });
    }
);

我尝试在 AfterChange 上设置“currentSlide”变量，但这并没有解决问题。

JsFiddle.

有什么想法吗？谢谢!

Answer 1

也许这对某人有帮助:

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