如何在w3代码中添加2个以上的幻灯片？

Question

I used w3 code for inserting multiple slideshows in one page ( https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_two )

I tried to add a third slideshow but it didn't work at all. I'm missing something with the function(showSlides) and I would appreciate your help with that.

here is the code:

html:

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="./assets/man001.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="./assets/man002.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="./assets/man003.jpg" style="width:100%">
  </div>

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

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="./assets/man004.jpg" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="./assets/2.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="./assets/man006.jpg" style="width:100%">
  </div>

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

<p>Slideshow 3:</p>
<div class="slideshow-container">
  <div class="mySlides3">
    <img src="./assets/j1.jpg" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="./assets/j2.jpg" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="./assets/j3.jpg" style="width:100%">
  </div>

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

and here is the js:

var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);


function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}

I'm a beginner so I struggle a lot with this. thanks a lot for the help!

Answer 1

I haven't use w3.js in a long time, but in that code, they have the images marked with class mySlides1 while you've created a div class="mySlides1" and added images inside them, try adding classes to the images themselves and remove the div, also - add the container div just like in the sample code

Also, to check if you're not missing anything, copy the exact code and see if that works, copy the ones which work and paste them changing the class from mySlides2 to mySlides3

Third: This is what I did to make it work: I added a third [1] in slideIndex since there are 3 slides this:

var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

Answer 2

You need to add another item to the slideIndex array, and another to the slideId array and call another showDivs(1, 2); And in your HTML you have to use onclick="plusDivs(-1, 2)" and onclick="plusDivs(1, 2)" for the third group of buttons. I consider this extremely inefficient.

 var slideIndex = [1,1,1]; var slideId = ["mySlides1", "mySlides2", "mySlides3"] showDivs(1, 0); showDivs(1, 1); showDivs(1, 2); function plusDivs(n, no) { showDivs(slideIndex[no] += n, no); } function showDivs(n, no) { var i; var x = document.getElementsByClassName(slideId[no]); if (n > x.length) {slideIndex[no] = 1} if (n < 1) {slideIndex[no] = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex[no]-1].style.display = "block"; } 

 <h2 class="w3-center">Manual Slideshow</h2> <div class="w3-content w3-display-container"> <img class="mySlides1" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%"> <img class="mySlides1" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%"> <img class="mySlides1" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%"> <img class="mySlides1" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">&#10094;</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">&#10095;</button> </div> <div class="w3-content w3-display-container"> <img class="mySlides2" src="https://www.w3schools.com/w3css/img_la.jpg" style="width:100%"> <img class="mySlides2" src="https://www.w3schools.com/w3css/img_ny.jpg" style="width:100%"> <img class="mySlides2" src="https://www.w3schools.com/w3css/img_chicago.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">&#10094;</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">&#10095;</button> </div> <div class="w3-content w3-display-container"> <img class="mySlides3" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%"> <img class="mySlides3" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%"> <img class="mySlides3" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%"> <img class="mySlides3" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%"> <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 2)">&#10094;</button> <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 2)">&#10095;</button> </div> 

Yet a better way of doing this is this:

please read the comments in the JavaScript

 var slideIndex; // the array of all containers let containers = Array.from(document.querySelectorAll(".w3-display-container")); // for each conteiner containers.forEach(c =>{ // get the array of images in this container let images = Array.from(c.querySelectorAll(".mySlides")); //the left button for this container let left = c.querySelector(".w3-display-left"); //the right button for this container let right = c.querySelector(".w3-display-right"); slideIndex = 0;//set the first slide plusDivs(0,images); // events for the this left and right buttons left.addEventListener("click", ()=>{plusDivs(-1,images)}) right.addEventListener("click", ()=>{plusDivs(1,images)}) }) function showDivs(x) { if (slideIndex > x.length-1) {slideIndex = 0} if (slideIndex < 0) {slideIndex = x.length-1} //All the slides are display="none" for (let i = 0; i < x.length; i++) { x[i].style.display = "none"; } // the current slide is display = "block"; x[slideIndex].style.display = "block"; } function plusDivs(n,x) { // increment the value for the slideIndex and show the slide slideIndex += n; showDivs(x); } 

 <h2>Manual Slideshow</h2> <div class="w3-display-container"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%"> <button class="w3-display-left" >&#10094;</button> <button class="w3-display-right" >&#10095;</button> </div> <div class="w3-display-container"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_la.jpg" style="width:100%"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_ny.jpg" style="width:100%"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_chicago.jpg" style="width:100%"> <button class="w3-display-left">&#10094;</button> <button class="w3-display-right">&#10095;</button> </div> <div class="w3-content w3-display-container"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%"> <img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%"> <button class="w3-display-left">&#10094;</button> <button class="w3-display-right">&#10095;</button> </div>