Mehrere Slideshow in einer Seite

Question

Könnten Sie bitte helfen, mehrere Slideshow basierend auf dem folgenden Code zu verwenden. Es funktioniert gut, wenn nur eine Diashow auf der Seite ist, in anderen Fällen muss ich den Code mehrmals kopieren und den Elementen unterschiedliche IDs geben. Gibt es eine Lösung, um dies zu lösen, ohne den Code zu kopieren? Hier

ist der Code von 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

Wenn Sie den gleichen Code mit mehreren Diashows verwenden möchten, können Sie hinzufügen, Parameter an die showSlides Funktion

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"; 
} 

So müssen Sie nur in HTML-Dateien die Argumente der Funktion

012 ändern

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>