Question

我正在使用Slick Slider jquery插件。 http://kenwheeler.github.io/slick/

我正试图创造这种效果：https://www.gillesetboissier.com/index.php?preload=1

要做到这一点。我试图保持当前幻灯片将translate3d设置为0px。但是这个滑块被阻止了。

function slick_init() {
    $('.splash-slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        vertical: true,
        verticalSwiping: true
    });

    $('.splash-slider').on('beforeChange', function(event, currentSlide) {
        currentSlide.css('transform', 'translate3d(0px, 0px, 0px)');
    });
}

请问这种方法有什么问题？

Answer 1

问题是你试图从传递给Slick beforeChange事件的参数转换元素css，事实上，currentSlide参数（在你的实现中）是对光滑的实例。您尝试使用的那个（对当前幻灯片的引用 - 第三个参数 - ）是当前幻灯片的索引，而不是幻灯片本身的引用。

beforeChange事件有3个参数：

slick：对Slick实例的引用
currentSlide：幻灯片动画之前的当前幻灯片
nextSlide：幻灯片动画后的下一张活动幻灯片

要获得幻灯片索引，您可以使用以下代码段：

slider.find('[data-slick-index="'+slideIndex+'"]');

其中slider是Slick滑块的实例，slideIndex是您尝试选择的幻灯片的索引。

因此将此应用于您的代码，您可以执行以下操作：

$('.splash-slider').on('beforeChange', function(event, slick, currentSlide) {
    $('.splash-slider').find('[data-slick-index="'+currentSlide+'"]').css('transform', 'translate3d(0px, 0px, 0px)');
});

光滑的滑块效果

1 个答案: