Применить анимацию к Slick Slides ⇐ CSS

[Anonymous]

Я хотел бы применить переход между этими изображениями к своему слайду Slick, чтобы иметь возможность управлять им.
Пример анимации (по сути, затухание и перемещение одновременно): https://jsfiddle.net/bg90fayo/
Мой красивый слайд: https://jsfiddle.net/L6qjpky4/3/

Код: Выделить всё

[img]https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Slide+1[/img]
[img]https://dummyimage.com/300x180/00ff00/000000.jpg&text=Slide+2[/img]
[img]https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Slide+3[/img]

[img]https://i.imgur.com/x3dgNKQ.jpg[/img]
[img]https://i.imgur.com/RCOaeIE.jpg[/img]
[img]https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Image+3[/img]

CSS

Код: Выделить всё

.my-slide-container {
margin: 30px;
}

.my-slide-wrapper, .my-image-wrapper {
margin: 0 auto;
max-width: 300px;
}

img {
max-width: 300px;
width: 100%;
}

.slick-dots li {
margin: 0;
}

.slick-next::before,
.slick-prev::before {
color: #000;
opacity: 1;
}

.my-image {
visibility: hidden;
position: absolute;
}

#myImage00 {
visibility: visible;
}

.im-hiding {
visibility: hidden;
}

.im-showing {
visibility: visible;
}

@keyframes fade-in-move-down {
0% {
opacity: 0;
transform: translateX(2rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.main{
animation: fade-in-move-down 1.2s;
top: 0;
left: 0;
display: block;
visibility: visible;
}

.slide .slick-active img{
visibility: visible;
}

JS

Код: Выделить всё

$(document).ready(function () {
$('#top-slider').slick({
asNavFor: '#bottom-slider',
dots: true,
infinite: false,
speed: 1,
slidesToShow: 1,
slidesToScroll: 1
});

$('#bottom-slider').slick({
arrows: false,
dots: false,
fade:true,
draggable: false,
infinite: false,
speed: 1,
slidesToShow: 1,
slidesToScroll: 1,
waitForAnimate: false,
});

});

Желаемый переход между слайдами:

Код: Выделить всё

body{
background-color:black;
}

@keyframes fade-in-move-down {
0% {
opacity: 0;
transform: translateX(2rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}

.main{
animation: fade-in-move-down 1.2s;
top: 0;
left: 0;
display: block;
visibility: visible;
}

Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/634 ... ick-slides