幻灯片之间的slick.js动画

Question

我在网站上使用Slick.js作为英雄标题。现在我想在从幻灯片导航到幻灯片时添加视差效果。可在此处找到此示例：http://www.boegli.ch/company

有没有办法覆盖默认的CSS动画并使用像Velocity.js这样的库？还是有其他方法来实现幻灯片之间的视差效果？

我试图通过使用beforeChange事件来实现这一点，然后将动画添加到我的幻灯片中。但我得到了幻灯片和我的自定义动画之间的默认slick.js动画与velocity.js的组合（下面的动画不是完整的动画，但我看到它不是像这样的gonne :(）

$('#header-hero').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            infinite: false,
            dots: false,
            fade: false,
            autoplay: false,
            autoplaySpeed: 5000,       
            speed: 300
        });
$('#header-hero').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
parallaxAnimate(this, slick, currentSlide, nextSlide);
});


var parallaxAnimate = function(el, slick, currentSlide, nextSlide){
        $curr_slide = $(el).find(".header-hero-image[data-slick-index="+currentSlide+"]");
        $next_slide = $(el).find(".header-hero-image[data-slick-index="+nextSlide+"]");

        $curr_slide.velocity({
                translateZ: 0, 
                translateX: "-100%"
            });
}