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

我尝试设置＆＃39; currentSlide＆＃39;变量onAfterChange但是没有修复它。

JsFiddle.

有什么想法吗？谢谢！

Answer 1

也许这有助于某人：

IMongoQueryable.AsQueryable()

Answer 2

如果我正确地解释了您的问题（中心图像在旋转之后徘徊不正常？）

据我所知，中心级别并未附加到该孩子身上，仍然保留在前一个孩子身上。试试这样的事情

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

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

Answer 3

你应该试试这个：

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

}）;

SlickSlider光滑中心幻灯片动画

3 个答案: