任意のコンテンツ（今回は5つのdiv）をjsのsetIntervalで無限に表示非表示を切り替えるサンプル　その２

切り替える対象が多い場合や増減が激しい場合に、いちいちjsの配列を追加削除をしなくてもよいしくみを考える

デモ↓
いち
に
さん
よん
ご
const slides = document.querySelectorAll('.roop');　//「roop」というクラス名がついた要素を取得し変数「slides」へ格納
const total = slides.length;　//取得した「slides」の数を「total」に代入
let current = 0;　//「current」の初期値を設定

if (total > 0) {　//「total」が0よりも大きければ
　slides[0].classList.add('show');　//classListプロパティで「slides」0番目（0はじまりのため）に「show」というクラス名を付与
}

setInterval(() => {
　slides.forEach(slide => slide.classList.remove('show'));
　current = (current + 1) % total;
　slides[current].classList.add('show');
　console.log(current + 1);
}, 3000);