JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main_contents">
  <ul class="slide_show_box">
    <!-- 画像を上から下に縦スクロール -->
    <li><img src="https://dummyimage.com/300x200/000/fff&text=o" /></li>

    <!-- フェードイン -->
    <li><img src="https://dummyimage.com/300x200/800/fff&text=1" /></li>
    <li><img src="https://dummyimage.com/300x200/880/fff&text=2" /></li>
    <li><img src="https://dummyimage.com/300x200/080/fff&text=3" /></li>
    <li><img src="https://dummyimage.com/300x200/088/fff&text=4" /></li>
    <li><img src="https://dummyimage.com/300x200/008/fff&text=5" /></li>
  </ul>
</div>

CSS

#main_contents {
  display: table;
  outline: 3px solid #000;
  overflow: hidden;
}
#main_contents ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#main_contents li {
  position: relative;
  display: none;
}
#main_contents img {
  vertical-align: bottom;
}

JavaScript

/**
 * スライドショー処理
 *
 **/
$(document).ready(function(){
   /**
   * 定数定義
   * スライドショービジネスロジック内で使用する定数
   *
   **/
  interval          = 4000; // スライドを切り替える間隔
  slide_default_num = /*1*/0;    // 画面初期表示時に表示するスライド番号
  slide_star_num    = /*2*/0;    // スライドショー開始番号
  slide_end_num     = 5;    // スライドショー終了番号

  /**
   * 画像の初期化
   *
   **/
  init();
});

/**
 * 画像の初期化
 *
 **/
function init() {
  // すべての画像を非表示
  $('.slide_show_box li').hide();

  // 1番目の画像を表示
  $('.slide_show_box li').eq(slide_default_num).show();
  
  main(); // ← mainを実行するよう追加
}

/**
 * メイン処理
 *
 **/
function main() {
  // 各項目
  $('.slide_show_box li').hide();                   // すべての画像を非表示
  $('.slide_show_box li').eq(slide_star_num).show(); //最初の画像を表示

  // 画像の縦スクロール
  scroll_down();

  // 次の画像を設定
  slide_star_num++;

  // 画像のフェードイン
  setTimeout(slideShow, interval);
}

/**
 * 画像の縦スクロール
 *
 **/
 var scroll_y = 0;
function scroll_down() {
  $('.slide_show_box li').eq(slide_star_num).css({top: "200px"}).animate({top: 0}, 1000);
}

/**
 * 画像のフェードイン
 *
 **/
function slideShow() {
  // 終了番号を超えた場合
  if (slide_star_num > slide_end_num/* - 1*/) { // ← -1はいらない？
    // スライドショーを終了
    return;
  }

  $('.slide_show_box li').eq(slide_star_num - 1).delay(1500).fadeOut(3000).queue(function() {
    // すべての画像を非表示
    $('.slide_show_box li').hide();

    $('.slide_show_box li').eq(slide_star_num).fadeIn(3000);
    slide_star_num++;
  });

  setTimeout(slideShow, interval);
}