我如何在 html 中制作超过 1 个幻灯片库？

Question

I try to make a slideshow gallery for my project, then i found this tutorial https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp it worked actually but only for 1 slideshow gallery, when i try to make the second one, it didn't work like i expected, it doesn't make 2 slideshow gallery my code just make the duplicate of the first one here is my code:

 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("demo"); var captionText = document.getElementById("caption"); 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"; captionText.innerHTML = dots[slideIndex - 1].alt; }

 * { box-sizing: border-box; } img { vertical-align: middle; } /* Position the image container (needed to position the left and right arrows) */.container { position: relative; } /* Hide the images by default */.mySlides { display: none; } /* Add a pointer when hovering over the thumbnail images */.cursor { cursor: pointer; } /* Next & previous buttons */.prev, .next { cursor: pointer; position: absolute; top: 40%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } /* Position the "next button" to the right */.next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */.prev:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* Container for image text */.caption-container { text-align: center; background-color: #222; padding: 2px 16px; color: white; }.row:after { content: ""; display: table; clear: both; } /* Six columns side by side */.column { float: left; width: 16.66%; } /* Add a transparency effect for thumnbail images */.demo { opacity: 0.6; }.active, .demo:hover { opacity: 1; }

 <div class="container"> <div class="mySlides"> <div class="numbertext">1 / 6</div> <img src="pict/paskib1.jpeg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">2 / 6</div> <img src="pict/paskib2.jpeg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">3 / 6</div> <img src="pict/paskib3.jpeg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">4 / 6</div> <img src="pict/paskib4.jpeg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">5 / 6</div> <img src="pict/paskib5.jpeg" style="width:100%"> </div> <div class="mySlides"> <div class="numbertext">6 / 6</div> <img src="pict/paskib6.jpeg" style="width:100%"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="row"> <div class="column"> <img class="demo cursor" src="pict/paskib1.jpeg" style="width:100%; height: 37px" onclick="currentSlide(1)" alt="PASKIBRA - SMK PGRI 11 CILEDUG"> </div> <div class="column"> <img class="demo cursor" src="pict/paskib2.jpeg" style="width:100%" onclick="currentSlide(2)" alt="PASKIBRA - SMK PGRI 11 CILEDUG"> </div> <div class="column"> <img class="demo cursor" src="pict/paskib3.jpeg" style="width:100%" onclick="currentSlide(3)" alt="PASKIBRA - SMK PGRI 11 CILEDUG"> </div> <div class="column"> <img class="demo cursor" src="pict/paskib4.jpeg" style="width:100%" onclick="currentSlide(4)" alt="PASKIBRA - SMK PGRI 11 CILEDUG"> </div> <div class="column"> <img class="demo cursor" src="pict/paskib5.jpeg" style="width:100%" onclick="currentSlide(5)" alt="PASKIBRA - SMK PGRI 11 CILEDUG"> </div> <div class="column"> <img class="demo cursor" src="pict/paskib6.jpeg" style="width:100%" onclick="currentSlide(5)" alt="PASKIBRA - SMK PGRI 11 CILEDUG"> </div> </div> </div>

Answer 1

You cannot simple duplicate your html code. If you want control each gallery with same javascript code you have to wrap your html gallary into a container element with an unique identfier. Here an idea:

<div id="gallery01">
<!-- Put your html code for gallery here -->
</div>

<div id="gallery02">
<!-- Put your html code for gallery here -->
</div>

Then you have to change your javascript main function so, that you pass theses id. Example:

 function showSlides(currentClickobj, n) {
  var containerElement = getParentContainer(currentCklickObj);
  var i;

  /* Replace in your code `document.' by 'containerElement.' */
  var slides = containerElement.getElementsByClassName("mySlides");
  var dots =containerElement.getElementsByClassName("demo");
  var captionText = containerElement.getElementById("caption");
  ...
}

Because you don't use jquery you need a function that returns the container element.

 getParentContainer(childNode) {
  /* Put your code here */
}