エンジニアのみなさん！slickでズーム&フェードを実装する方法です

<div class="slider-wrap">
  <div class="slide-item">
    <img src="https://picsum.photos/2000/2000" alt="">
  </div>
  <div class="slide-item">
    <img src="https://picsum.photos/1000/1000" alt="">
  </div>
  <div class="slide-item">
    <img src="https://picsum.photos/800/800" alt="">
  </div>
</div>

// スライダーのサイズ
.slider-wrap {
  height: 500px;
  width: 80vw;
  margin: 0 auto;
  overflow: hidden;
}

// 画像の表示(オブジェクトフィットなど)
.slide-item>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

//ズームする アニメーション
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.1);
  }
}

//このクラス名で、ズームするアニメーションを呼び出せる
.slick-animation {
  animation: fadezoom 5s 0s forwards;
}

//slickを初期化した際に発生するイベント（初期表示のスライドに.slick-animationのクラスをつける)
$('.slider-wrap').on('init', function () {
  $('.slick-slide[data-slick-index="0"]').addClass('slick-animation');
})
  .slick({
    autoplay: true,
    infinite: true,
    fade: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    speed: 1000,
    autoplaySpeed: 3000,
    pauseOnFocus: false,
    pauseOnHover: false
  })
  .on({
    // スライドが移動する前に発生するイベント
    beforeChange: function (event, slick, currentSlide, nextSlide) {
      //表示されているスライドに.slick-animationのクラスをつける
      $(".slick-slide", this).eq(nextSlide).addClass("slick-animation");

      //あとで、.slick-animationのクラスを消すための.stop-animationクラスを付ける
      $(".slick-slide", this).eq(currentSlide).addClass("stop-animation");
    },
    // スライドが移動した後に発生するイベント
    afterChange: function () {
      //見えてないスライドにはアニメーションのクラスを外す
      $(".stop-animation", this).removeClass("stop-animation slick-animation");
    },
  });

$('.slider').on('init', function(event, slick){
  //ここに初期化した際に発生するイベントを記述します
});

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  //ここにスライドが移動する前のイベントを記述します
});

$('.slider').on('afterChange', function(event, slick, currentSlide){
  //ここにスライドが移動した後のイベントを記述します
});