【jQuery】 文字を交互に表示する

<div id="header-text">
  <div id="text-1" class="text-item">テキスト1だよ</div>
  <div id="text-2" class="text-item none">テキスト2だよ</div>
  <div id="text-3" class="text-item none">テキスト3だよ</div>
</div>

<style>
  .none {
    display: none;
  }
  #header-text {
    background: #6370c1;
    color: #fff;
    text-align: center;
    padding: 10px;
  }
</style>

<!-- jQueryをCDNで読み込み -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
    $(function() {
        // 3秒ごとにtoggleText関数を実行する
        window.setInterval(toggleText, 3000);
    });

    let current_index = 1; // 今表示するテキストのindex
    let next_index = current_index + 1; // 次に表示するテキストのindex
    const max_count = $('.text-item').length; // テキストの総数

    function toggleText() {
        // 今表示されているテキストをfadeOutする
        $("#header-text").find(`#text-${current_index}`).fadeOut('slow', function() {
            // 次に表示するテキストをfadeInする
            $("#header-text").find(`#text-${next_index}`).fadeIn(600);
            // 今表示されているテキストのindexを更新する
            current_index = next_index;
            // 次表示するテキストのindexを更新する
            next_index++;
            // テキストの総数に達した場合はリセット (一番初めのテキストに戻す)
            if(next_index > max_count){
                next_index = 1;
            }
        });
    }
</script>

$("#header-text").find(`#text-${current_index}`)