我刚刚创建了一个具有淡入淡出效果的光滑滑条样本。我想在这些滑块图像的淡入和淡出效果之间添加一秒钟的延迟。即,在淡出一次幻灯片图像之后,到下一个滑块图像淡入应该有一秒钟的间隔。以下是我的代码和代码笔链接。
密码笔链接:https://codepen.io/dSaif/pen/ExaaQJV
请帮助我该怎么做
$(document).ready(function($) {
$('.slider').slick({
dots: false,
arrows: false,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
fade:true,
autoplay: true,
speed: 2000,
cssEase: 'linear',
pauseOnHover:true,
responsive: [
{
breakpoint: 767,
settings: {
arrows: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2018/04/26/16/39/beach-3352363_960_720.jpg">
</div>
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg">
</div>
<div class="img-container"><img src="https://cdn.pixabay.com/photo/2016/03/08/20/03/flag-1244649_960_720.jpg">
</div>
</div>