光滑滑块的缓慢淡出效果

Question

我创建了一个带有淡入淡出效果的光滑滑块，并提供了 2 秒的自动播放速度。 我希望图像的淡出效果很慢。 下面是我的代码。

HTML：

        <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>

jQuery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script>
        $(document).ready(function($) {
    $('.slider').slick({
      dots: false,
      arrows: false,
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1,
  fade:true,
      autoplay: true,
      autoplaySpeed: 2000,
      pauseOnHover:true,
      responsive: [
      {
        breakpoint: 767,
        settings: {
            arrows: false,
            slidesToShow: 1,
            slidesToScroll: 1
        }
      }]
    });
  });
</script>

请帮助我如何做到这一点，因为我添加了fadeOut:2000但它不起作用

Codepen 链接： Codepen 链接

Answer 1

试试这个css：

 .slider{
  -webkit-transition: opacity 2000s ease-in-out;
    -moz-transition: opacity 2000s ease-in-out;
    -ms-transition: opacity 2000s ease-in-out;
    -o-transition: opacity 2000s ease-in-out;
     opacity: 1;
}

添加这个JS：

$(document).ready(function(){
  $('.slider').slick({
    fade: true,
    speed: 2000,
    cssEase: 'linear'
  });
});