Jquery 平滑滑块平滑中心幻灯片动画

我有一个带有透明背景的滑块，我想在悬停中心div时设置滑块背景的动画，但在滑块移动后，悬停效果会影响到以前具有“slick center”类的所有幻灯片。有什么建议可以解决吗？到目前为止，我已经尝试过：

HTML:

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

有什么想法吗？谢谢大家!

您应该尝试以下方法：

幻灯片滚动：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

---

}))

也许这有助于某人：

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

---

如果我正确地解释了你的问题（中心图像在旋转后悬停时表现不正确？）

据我所知，中心类并没有附加到那个孩子身上，仍然是前一个。试试这样的

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

---

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

我需要滚动1张幻灯片。将数字减少为1作为幻灯片滚动：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');
            }
        );

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