ズームインしながらフェードで切り替わるスライダーをjQueryとプラグインなしで実装してみた

<ul id="slide_wrapp">
  <li class="slide_item"><!-- スライド1の中身 --></li>
  <li class="slide_item"><!-- スライド2の中身 --></li>
  <li class="slide_item"><!-- スライド3の中身 --></li>
</ul>

window.addEventListener('load', function () {
   sliderStart();
});

function sliderStart() {

    const slide = document.getElementById('slide_wrapp');      //スライダー親
    const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
    const totalNum = slideItem.length - 1;                     //スライドの枚数を取得
    const FadeTime = 2000;                                     //フェードインの時間
    const IntarvalTime = 5000;                                 //クロスフェードさせるまでの間隔
    let actNum = 0;                                            //現在アクティブな番号
    let nowSlide;                                              //現在表示中のスライド
    let NextSlide;                                             //次に表示するスライド

    // スライドの1枚目をフェードイン
    slideItem[0].classList.add('show_', 'zoom_');

    // 処理を繰り返す
    setInterval(() => {
        if (actNum < totalNum) {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[++actNum];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);

        } else {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[actNum = 0];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);

        };
    }, IntarvalTime);

}

#slide_wrapp{
  position: relative;
  overflow: hidden;
  
  .slide_item{
    opacity: 0;
    transform: scale(1);
    transition: opacity 2s linear, transform 7.5s linear;  //秒数に注意
    position: relative;
    z-index: 1;
    
    &:not(:first-child){
      position: absolute;
      top: 0;
      left : 0;
    }
  
    &.show_{
      opacity: 1;
    }
    &.zoom_{
      transform: scale(1.1);
    }
    img{
      display: block; //下に余白ができないように
    }
  }
}

//これだと初回動作が安定しない
document.addEventListener('DOMContentLoaded', function () {
    sliderStart();
});

<ul id="slide_wrapp">
    <li class="slide_item"><img src="image.jpg" alt="画像" onload="sliderStart()"></li>
    <!-- その他のスライド... -->
</ul>