淡入淡出图像和淡入淡出图像会延迟滑动滑块

时间:2019-12-07 07:05:42

标签: javascript jquery html

我刚刚创建了一个具有淡入淡出效果的光滑滑条样本。我想在这些滑块图像的淡入和淡出效果之间添加一秒钟的延迟。即,在淡出一次幻灯片图像之后,到下一个滑块图像淡入应该有一秒钟的间隔。以下是我的代码和代码笔链接。

密码笔链接: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>
我想要幻灯片之间的一秒间隔。也就是说,第一个幻灯片图像需要完成淡入淡出处理,并且需要留出一秒钟的间隔,然后下一个幻灯片图像应淡入。

0 个答案:

没有答案