光滑的滑块效果

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

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

beforeChange 事件需要 3 个参数：

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

要通过索引获取幻灯片，您可以使用以下 sn-p：

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