jqueryを使って兄弟要素の表示、非表示をループさせたい

Question

兄弟要素にactiveクラスを付与して、一定時間ごとに表示させたり非表示させたりしたいのですが、ループがうまく回りません。

<div class="how-to-top">
	<div class="how-to-item active">
		<span>Training</span>
		<div class="parallelogram active"><p>育成</p></div>
	</div>
	<div class="how-to-item">
		<span>Strategy</span>
		<div class="parallelogram"><p>戦略</p></div>
	</div>
	<div class="how-to-item">
		<span>Action</span>
		<div class="parallelogram"><p>アクション</p></div>
	</div>
</div>
<div>
	<div class="how-to-img active">
		<div class="how-to-img-item">
			<img src="https://lolstatic-a.akamaihd.net/frontpage/apps/prod/jp-publishing-lp-2018/ja_JP/9350dd77fb375a6cc29be30f272baa5106e27cdb/assets/assets/assets_a/img/img_howto-1.png" alt="育成イメージ">
		</div>
		<p>ゲーム内で敵を倒せばゴールドを獲得できる。そのゴールドで好きなアイテムを買って自分なりのプレイスタイルを作ろう！アーマー？ダメージ？ヒール？あなたに合ったアイテムがきっとある。</p>
	</div>
	<div class="how-to-img">
		<div class="how-to-img-item">
			<img src="https://lolstatic-a.akamaihd.net/frontpage/apps/prod/jp-publishing-lp-2018/ja_JP/9350dd77fb375a6cc29be30f272baa5106e27cdb/assets/assets/assets_a/img/img_howto-2.png" alt="戦略イメージ">
		</div>
		<p>この5対5オンラインバトルアリーナでは、プレイヤーはトップ、ミッド、ボットの３つのうち守りたいレーンに向かい、敵と戦いながらネクサス（本拠地）を目指す。敵のネクサスを壊せば勝利となる！</p>
	</div>
	<div class="how-to-img">
		<div class="how-to-img-item">
			<img src="https://lolstatic-a.akamaihd.net/frontpage/apps/prod/jp-publishing-lp-2018/ja_JP/9350dd77fb375a6cc29be30f272baa5106e27cdb/assets/assets/assets_a/img/img_howto-3.png" alt="アクションイメージ">
		</div>
		<p>100キャラクター以上から好きな役割で遊べる。アサシン、タンク、サポート、メイジ、マークスマン。チームにどう貢献するかはあなた次第！</p>
	</div>
</div>

setInterval(function() {
	$('.how-to-item.active, .how-to-img.active').next().addClass('active');
	$('.how-to-item.active, .how-to-img.active').prev().removeClass('active');
	if($('.how-to-item, .how-to-img').eq(4).hasClass('active')){
		$('.how-to-item, .how-to-img').eq(4).removeClass('active');
		$('.how-to-item, .how-to-img').eq(0).addClass('active');
	}
},1000);

この記述だと最後の要素が、表示された瞬間に非表示になってしまい、最初の要素が表示されてしまいます。
何かよい記述方法はないでしょうか。
よろしくお願いいたします。

Comments

[yambejp]

HTMLを記載ください

[maturyo]

申し訳ございません。
追加しました。

Answer 1

たとえばこう

<style>
.how-to-item.active{color:red}
</style>
<script>
setInterval(function() {
  $('.how-to-item.active').removeClass('active').next().addClass('active');
  if($('.how-to-item.active').length==0) $('.how-to-item').eq(0).addClass('active')
},1000);
</script>
<div class="how-to-top">
    <div class="how-to-item active">
        <span>Training</span>
        <div class="parallelogram active"><p>育成</p></div>
    </div>
    <div class="how-to-item">
        <span>Strategy</span>
        <div class="parallelogram"><p>戦略</p></div>
    </div>
    <div class="how-to-item">
        <span>Action</span>
        <div class="parallelogram"><p>アクション</p></div>
    </div>
</div>

Comments

[maturyo]

ありがとうございます。
参考にさせていただきます。