JavaScriptでスライドショーの下にある黒丸の連動が上手くいかない

Question

<div id="header-bg" class="header-bg">
</div>
<div class="content-top-slide">
<div class="content-top-slide-prev">
<div class="content-top-slide-prev-btn" id="slide-prev">&lt;</div>
</div>
<div class="content-top-slide-points">
<span id="content-top-slide-point1" class="content-top-slide-point content-top-slide-point-color"></span>
<span id="content-top-slide-point2" class="content-top-slide-point"></span>
<span id="content-top-slide-point3" class="content-top-slide-point"></span>
<span id="content-top-slide-point4" class="content-top-slide-point"></span>
<span id="content-top-slide-point5" class="content-top-slide-point"></span>
<span id="content-top-slide-point6" class="content-top-slide-point"></span>
</div>
<div class="content-top-slide-next">
<div class="content-top-slide-next-btn" id="slide-next">&gt;</div>
</div>

const images = [
"https://jpg",
"https://jpg",
"https://jpg",
"https://jpg",
"https://jpg",
"https://jpg"
]

const point = [
  document.getElementById("content-top-slide-point1"),
  document.getElementById("content-top-slide-point2"),
  document.getElementById("content-top-slide-point3"),
  document.getElementById("content-top-slide-point4"),
  document.getElementById("content-top-slide-point5"),
  document.getElementById("content-top-slide-point6")
];
let currentNum = 0;
const header_bg = document.getElementById("header-bg");
const slide_point = document.getElementsByClassName( "content-top-slide-point" )

header_bg.style.backgroundImage = "url(" + images[ currentNum ] + ")";

const prev = document.getElementById("slide-prev");
const next = document.getElementById("slide-next");

prev.addEventListener("click",()=> {
	if(currentNum === 0) {
		currentNum = images.length - 1;
	} else {
		currentNum --;
	}
	
	header_bg.style.backgroundImage = "url(" + images[ currentNum ] + ")";
	for(let i = 0; 0 < point.length; i++) {
		point[i].classList.remove("content-top-slide-point-color");
	}
	point[currentNum].classList.add("content-top-slide-point-color");
});

next.addEventListener("click",()=> {
	if(currentNum === images.length - 1) {
		currentNum = 0;
	} else {
		currentNum ++;
	}
	
	header_bg.style.backgroundImage = "url(" + images[ currentNum ] + ")";
	for(let i = 0; 0 < point.length; i++) {
		point[i].classList.remove("content-top-slide-point-color");
	}
	point[currentNum].classList.add("content-top-slide-point-color");
});

現在スライドショーを作成中ですが、よくあるスライドショーの下にあるスライドショーと連動する丸が上手く作動しません。

スライドショーの下にあるスライドショーと連動する丸のイメージ画像

・コードでしていること
１．下の一つの丸にだけ「content-top-slide-point-color」という色を黒にするcssのクラスを持たせています。
２．nextやprevをクリックされたときに、for文を使って全ての丸から「content-top-slide-point-color」削除しています。
３．「currentNum」を使って、特定の1つの丸にだけ「content-top-slide-point-color」のクラスを追加します。

・現状
nextやprevをクリックされたときに、「content-top-slide-point-color」削除されて、全ての丸が同じ色になります。

・やりたいこと
nextやprevをクリックされたときに、次の丸、若しくは前の丸に「content-top-slide-point-color」のクラスが反映されて、色が変更されるようにしたいです。

分かりずらい説明文とコードですみません。
修正依頼がある場合は、必ず対応します。

ご知恵を拝借したいです。
宜しくお願いします。

Comments

[退会済みユーザー]

初コメント失礼します。。。m(_ _)m
あの、質問のタイトルを明確にJavaScriptで何をしたいのか書かないと低評価を押されてしまいますよ・・・明確に書き直すことをオススメします・・・

[退会済みユーザー]

あっ・・・今編集確認しました。失礼しました。

[ntttt]

いえいえ、先走ってしまい、タイトルを書くのを忘れて投稿してしまいました。
ご指摘ありがとうございます。

[退会済みユーザー]

大丈夫です。(^^)
あの、力不足かもしれませんが、こちらのサイトはどうでしょうか？
→https://techacademy.jp/magazine/9529

参考にしてみてください。m(_ _)m

[ntttt]

JSでの実装が上手くいかなけれれば、こちらのサイトを参考にさせていただきます。
情報提供ありがとうございます。

[退会済みユーザー]

力不足で申し訳ありませんでした。????

いつでも質問してください！

Answer 1

ここ無限ループになっていませんか？

--for(let i = 0; 0 < point.length; i++)
++for(let i = 0; i < point.length; i++)

Comments

[ntttt]

解決することができました！
ありがとうございました。