Slideshow with different sets of slides on one webpage

Question

I have a website with multiple popups and I want to place a slideshow into each popup. When I add second slideshow, slides from first slideshow appear on second slideshow.

I use .getElementsByClassName to specify images for slideshows, but I don't understand how I can separate specific slides for each slideshow or adjust functions to handle multiple class names for each slideshow.

My code is as follows.

<div id="popup1" class="overlay">
<div class="popup">
    <h2>YAMAHA XV950 (BOLT)</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
        <div class="slideshow-container">
            <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="YAMAHA%20XV950.png"  height="330">
            <div class="text"></div>
            </div>

            <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="YAMAHA%20XV950-2.png" height="330">
            <div class="text"></div>
            </div>

            <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="YAMAHA%20XV950-3.png" height="330">
            <div class="text"></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>
        <br>
    </div>
</div>
</div>
<div id="popup2" class="overlay">
<div class="popup">
    <h2>SUZUKI INTRUDER (BOLT)</h2>
    <a class="close" href="#">&times;</a>
    <div class="content">
        <div class="slideshow-container">
            <div class="mySlides1 fade">
            <div class="numbertext">1 / 3</div>
            <img src="SintruderC1500BT%20B.O.S.S..png"  height="330">
            <div class="text"></div>
            </div>

            <div class="mySlides1 fade">
            <div class="numbertext">2 / 3</div>
            <img src="SintruderC800B%20B.O.S.S..png" height="330">
            <div class="text"></div>
            </div>

            <div class="mySlides1 fade">
            <div class="numbertext">3 / 3</div>
            <img src="SintruderM1800R.png" height="330">
            <div class="text"></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>
        </div>
</div>
</div>
<script>

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

}

</script>                      

Answer 1

Try passing another parameter in all the functions plusSlides(),currentSlide() and showSlides() for slides for different popup in like

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

function currentSlide( slide, n) {
   showSlides(slideIndex = n);
}
function showSlides( slide, n){
  var slides = document.getElementsByClassName("slide");
}

and calling function like and also change the class name

<a class="next" onclick="plusSlides(myslide1,1)">&#10095;</a>
<span class="dot" onclick="currentSlide( myslide1,3)"></span> 

<a class="next" onclick="plusSlides(myslide2,1)">&#10095;</a>
<span class="dot" onclick="currentSlide( myslide2,3)"></span> 

as your function is calling all the elements having mySlides