平滑滑动效果的淡出效果

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时该如何做？但它不起作用

Answer 1

尝试使用此CSS：

.slick-slide {
        opacity:0;
        transition:opacity 1s ease-out;
    }

.slick-active {
        opacity:1!important;
        transition:opacity 1s ease-in;
    }

添加此JS：

$(document).ready(function(){
  $('.slider').slick({
    speed: 2000
  });
});