ゴール：大型ディスプレイに表示する6つのスライドショーを表示するHTMLページを作成します。各スライドショーは、ショールームで製品と製品の情報を表示するのと同じバッチの画像を使用します。これは内部使用のみであり、ロードされてループを継続しますので、ロード時間が少し遅ければ、それは世界の終わりではありません。複数のスライドショーを表示するHTMLページ
私が行ったこと：私はページの基本レイアウトを作成し、W3 Schoolsの基本的なJavaScriptを見つけてスライドショーを作成しました。 W3スクールのコードは、ページごとに1つのスライドショー用に設計されています。これを回避するには、スクリプトを複製し、各スクリプトに使用する新しいクラスを作成することを提案する複数の投稿があることがわかりました。
問題：スクリプトを複製すると、スライドショーの1つだけが正しく機能します。私がこれで見ることができるもう一つの問題は、同じスクリプトの6つのコピーを手に入れずにスライドショーを実行するすべての場所に各画像を含める必要があるページのコードです。
ここで私は助けが必要です：多くのスライドショーを実行するためのJavaScriptをより洗練された方法で処理しますか？私はJavaScriptに精通していませんが、同じスクリプトの6つのコピーが必要ないようにそれを処理する良い方法があると思います。
その他の情報：誰かが見ているよりよい解決策がある場合は、私はHTMLページオプションを省略することに反対していません。私が持っている現在のコードは以下の通りです。私が紛失している情報や明確化が必要な場合は、私に知らせてください。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides1 {display:none;}
.mySlides2 {display:none;}
</style>
<body>
<!--Top Row-->
<div class="w3-cell-row">
<div class="w3-yellow w3-cell w3-third">
<img class="mySlides1" src="img1.jpg" style="width:100%">
<img class="mySlides1" src="img2.jpg" style="width:100%">
<img class="mySlides1" src="img3.jpg" style="width:100%">
</div>
<div class="w3-green w3-cell w3-third">
<p>Top Center</p>
</div>
<div class="w3-blue w3-cell w3-third">
<p>Top Right Corner</p>
</div>
</div>
<!--Bottom Row-->
<div class="w3-cell-row">
<div class="w3-red w3-cell w3-third">
<p>Bottom Left Corner</p>
</div>
<div class="w3-purple w3-cell w3-third">
<img class="mySlides2" src="img4.jpg" style="width:100%">
<img class="mySlides2" src="img5.jpg" style="width:100%">
<img class="mySlides2" src="img6.jpg" style="width:100%">
</div>
<div class="w3-amber w3-cell w3-third">
<p>Bottom Right Corner</p>
</div>
</div>
<!--Script for first slideshow-->
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
<!--Script for second slideshow-->
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
更新：はフィードバックをいただき、ありがとうございます。 @helbからのフィードバックを使用して、同じページで複数のスライドショーを実行するようにJavaScriptを変更することができました。私は参考のために更新されたJavaScriptを掲載しました。
function carousel(className, slideStart) {
var i;
var myIndex = slideStart;
var x = document.getElementsByClassName(className);
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000, className, myIndex); // Change image every 2 seconds
}
carousel("show1", 0);
carousel("show2", 3);
これを独自に書くのではなく、使用できるカルーセルライブラリがいくつかあります。 https://owlcarousel2.github.io/OwlCarousel2/（私のお気に入り）を見てください。あなたがまだこのことを学びたいと思っているのであれば、あなたは彼らがどのようにして行ったかを見ることができます。 – Kamelkent