【ズーム機能を追加】Slick/全画面でふわっと切り替えスライドショー

<ul class="slider">
  <li></li>
  <li></li>
  <li></li>
</ul>

/* リセットCSS */
body,ul,li {padding: 0;margin: 0;}
/* スリックスライダー */
.slider li {
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.slider li:first-of-type {
	background-image: url(https://picsum.photos/1921/1080);
}
.slider li:nth-child(2) {
	background-image: url(https://picsum.photos/1922/1081);
}
.slider li:last-of-type {
	background-image: url(https://picsum.photos/1923/1082);
}
/* 拡大率調整 */
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}
/* ズームアニメーション */
.animation {
  animation: fadezoom 15s 0s forwards;
}

$(function () {
  $(".slider")
    // 1番目のスライドに"animation"のclassを付ける
    .on("init", function () {
      $('.slick-slide[data-slick-index="0"]').addClass("animation");
    })
    .slick({
      autoplay: true, //スライダーの自動再生
      fade: true, //スライドの切り替えをフェードに
      arrows: false, //前へ、次への矢印ボタンの有無
      speed: 6000, // スライド、フェードアニメーションの速度1000ミリ秒
      autoplaySpeed: 3000, //自動再生時のスライドの静止時間
      pauseOnFocus: false, //フォーカスで一時停止を無効
      pauseOnHover: false, //マウスホバーで一時停止を無効
      pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
    })
    .on({
      // スライドが移動する前に表示されているスライドに"animation"のclassをつける
      // "animation"のclassを消すための"remove"classを付ける
      beforeChange: function (event, slick, currentSlide, nextSlide) {
        $(".slick-slide", this).eq(nextSlide).addClass("animation");
        $(".slick-slide", this).eq(currentSlide).addClass("remove");
      },
      // スライドが移動した後に表示していないスライダーはアニメーションのclassを外す
      afterChange: function () {
        $(".remove", this).removeClass(
          "remove animation"
        );
      },
    });
});