複数のスライドショーを1ページに表示

Question

下記のコードに基づいて複数のスライドショーを使用することをお助けください。それは、1つのスライドショーだけがページにある場合はうまく動作します。それ以外の場合は、コードを複数回コピーして要素に異なるIDを付ける必要があります。コードをコピーせずにこれを解決する解決策はありますか？ここで

は、W3Schoolsのからのコードです：

var slideIndex = 1; 
 
showSlides(slideIndex); 
 

 
function plusSlides(n) { 
 
    showSlides(slideIndex += n); 
 
} 
 

 
function currentSlide(n) { 
 
    showSlides(slideIndex = n); 
 
} 
 

 
function showSlides(n) { 
 
    var i; 
 
    var slides = document.getElementsByClassName("mySlides"); 
 
    var dots = document.getElementsByClassName("dot"); 
 
    if (n > slides.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = slides.length} 
 
    for (i = 0; i < slides.length; i++) { 
 
     slides[i].style.display = "none"; 
 
    } 
 
    for (i = 0; i < dots.length; i++) { 
 
     dots[i].className = dots[i].className.replace(" active", ""); 
 
    } 
 
    slides[slideIndex-1].style.display = "block"; 
 
    dots[slideIndex-1].className += " active"; 
 
}

<div class="slideshow-container"> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">1/3</div> 
 
    <img src="img_nature_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Text</div> 
 
</div> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">2/3</div> 
 
    <img src="img_fjords_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Two</div> 
 
</div> 
 

 
<div class="mySlides fade"> 
 
    <div class="numbertext">3/3</div> 
 
    <img src="img_mountains_wide.jpg" style="width:100%"> 
 
    <div class="text">Caption Three</div> 
 
</div> 
 

 
<a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
<a class="next" onclick="plusSlides(1)">&#10095;</a> 
 

 
</div> 
 
<br> 
 

 
<div style="text-align:center"> 
 
    <span class="dot" onclick="currentSlide(1)"></span> 
 
    <span class="dot" onclick="currentSlide(2)"></span> 
 
    <span class="dot" onclick="currentSlide(3)"></span> 
 
</div>

Answer 1

あなたがshowSlides機能

var slideIndex = 1; 

showSlides(slideIndex,"mySlides","dots"); 

function plusSlides(n,nSliders,nDots) { 
    showSlides(slideIndex += n,nSliders,nDots); 
} 

function currentSlide(n,nSliders,nDots) { 
    showSlides(slideIndex = n,nSliders,nDots); 
} 
function showSlides(n,nSliders,nDots) { 
    var i; 
    var slides = document.getElementsByClassName(String(nSliders)); 
    var dots = document.getElementsByClassName(nDots); 
    if (n > slides.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
} 

にパラメータを追加することができ、複数のスライドショーと同じコードを使用したい場合このように、htmlファイル内でのみ、関数の引数を変更する必要があります。

HTML：

<div class="slideshow-container"> 

<div class="mySlides fade"> 
    <div class="numbertext">1/3</div> 
    <img src="img_nature_wide.jpg" style="width:100%"> 
    <div class="text">Caption Text</div> 
</div> 

<div class="mySlides fade"> 
    <div class="numbertext">2/3</div> 
    <img src="img_fjords_wide.jpg" style="width:100%"> 
    <div class="text">Caption Two</div> 
</div> 

<div class="mySlides fade"> 
    <div class="numbertext">3/3</div> 
    <img src="img_mountains_wide.jpg" style="width:100%"> 
    <div class="text">Caption Three</div> 
</div> 

<a class="prev" onclick="plusSlides(-1,'mySlides','dots')">&#10094;</a> 
<a class="next" onclick="plusSlides(1,'mySlides','dots')">&#10095;</a> 

</div> 
<br> 

<div style="text-align:center"> 
    <span class="dot" onclick="currentSlide(1,'mySlides','dots')"></span> 
    <span class="dot" onclick="currentSlide(2,'mySlides','dots')"></span> 
    <span class="dot" onclick="currentSlide(3,'mySlides','dots')"></span> 
</div>