jquery - 光滑的 slider 效果

Question

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

我正在尝试创建这种效果:https://www.gillesetboissier.com/index.php?preload=1

为了做到这一点。我试图将当前幻灯片保持在适当的位置，以将 translate3d 设置为 0px。但这个 slider 被阻止了。

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 参数(在您的实现中) ) 是对 slick 实例的引用。您尝试使用的(对当前幻灯片的引用 - 第三个参数 -)是当前幻灯片的索引，而不是对幻灯片本身的引用。

beforeChange 事件需要 3 个参数:

• slick:对 Slick 实例的引用
• currentSlide:当前幻灯片，幻灯片动画之前
• nextSlide:幻灯片动画之后的下一张事件幻灯片

要通过索引获取幻灯片，您可以使用以下代码片段:

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

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

因此，将其应用到您的代码中，您可以执行以下操作:

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