Javascript 幻灯片之间的slick.js动画

我在一个网站上使用Slick.js作为英雄标题。现在我想在幻灯片之间导航时添加一个视差效果。这方面的一个例子如下：

有没有办法覆盖默认css动画并使用Velocity.js之类的库？还是有其他方法可以实现幻灯片之间的视差效果

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

---

您已经尝试过什么？要改进提问，请阅读thx@davejal我添加了代码示例您已经尝试过什么？要改进提问，请阅读thx@davejal我添加了代码示例

$('#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%"
            });
}