我想将这些图像之间的过渡应用到我的 Slick 幻灯片中，以便我可以控制。
动画示例（基本上是同时淡入淡出和移动）：https://jsfiddle.net/bg90fayo/
我的光滑幻灯片：https://jsfiddle.net/L6qjpky4/3/
<body>
<div class="my-slide-container">
<div id="top-slider" class="my-slide-wrapper">
<img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Slide+1">
<img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Slide+2">
<img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Slide+3">
</div>
<div id="bottom-slider" class="my-slide-wrapper">
<img class="slide slide00 main" style="animation-delay: 0s; animation-fill-mode: forwards; opacity:0;" src="https://i.imgur.com/x3dgNKQ.jpg">
<img class="slide slide01 main" style="animation-delay: 4s; animation-fill-mode: forwards; opacity:0; display: block; visibility: visible;" src="https://i.imgur.com/RCOaeIE.jpg">
<img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Image+3">
</div>
</div>
</body>
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;
}
谢谢你。
您可以使用灵活的参数来做到这一点：
$('#top-slider').slick({
asNavFor: '#bottom-slider',
dots: true,
infinite: false,
speed: 1,
autoplay: true,
autoplaySpeed: 2000,
slidesToShow: 1,
slidesToScroll: 1
});
您可以根据需要进行调整 - 阅读更多此处。
根据评论进行编辑：
您需要将动画设置为活动幻灯片选择器：
.slick-active { animation: fade-in-move-down 1.2s; }
为了仅将动画设置为第二个滑块，您可以：
#bottom-slider .slick-active { animation: fade-in-move-down 1.2s; }
这篇文章提供了关于如何使用animate.css做到这一点的很好的解释。