How To Add More Than 2 Slideshows In W3 Code?

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 did

Solution 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);

Solution 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);

functionplusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

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

<h2class="w3-center">Manual Slideshow</h2><divclass="w3-content w3-display-container"><imgclass="mySlides1"src="https://www.w3schools.com/w3css/img_snowtops.jpg"style="width:100%"><imgclass="mySlides1"src="https://www.w3schools.com/w3css/img_lights.jpg"style="width:100%"><imgclass="mySlides1"src="https://www.w3schools.com/w3css/img_mountains.jpg"style="width:100%"><imgclass="mySlides1"src="https://www.w3schools.com/w3css/img_forest.jpg"style="width:100%"><buttonclass="w3-button w3-black w3-display-left"onclick="plusDivs(-1, 0)">&#10094;</button><buttonclass="w3-button w3-black w3-display-right"onclick="plusDivs(1, 0)">&#10095;</button></div><divclass="w3-content w3-display-container"><imgclass="mySlides2"src="https://www.w3schools.com/w3css/img_la.jpg"style="width:100%"><imgclass="mySlides2"src="https://www.w3schools.com/w3css/img_ny.jpg"style="width:100%"><imgclass="mySlides2"src="https://www.w3schools.com/w3css/img_chicago.jpg"style="width:100%"><buttonclass="w3-button w3-black w3-display-left"onclick="plusDivs(-1, 1)">&#10094;</button><buttonclass="w3-button w3-black w3-display-right"onclick="plusDivs(1, 1)">&#10095;</button></div><divclass="w3-content w3-display-container"><imgclass="mySlides3"src="https://www.w3schools.com/w3css/img_snowtops.jpg"style="width:100%"><imgclass="mySlides3"src="https://www.w3schools.com/w3css/img_lights.jpg"style="width:100%"><imgclass="mySlides3"src="https://www.w3schools.com/w3css/img_mountains.jpg"style="width:100%"><imgclass="mySlides3"src="https://www.w3schools.com/w3css/img_forest.jpg"style="width:100%"><buttonclass="w3-button w3-black w3-display-left"onclick="plusDivs(-1, 2)">&#10094;</button><buttonclass="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 containerslet containers = Array.from(document.querySelectorAll(".w3-display-container"));

// for each conteiner
containers.forEach(c =>{
  // get the array of images in this containerlet images = Array.from(c.querySelectorAll(".mySlides"));
  //the left button for this containerlet left = c.querySelector(".w3-display-left");
  //the right button for this containerlet right = c.querySelector(".w3-display-right");
  
  slideIndex = 0;//set the first slideplusDivs(0,images);
  
  
  // events for the this left and right buttons
  left.addEventListener("click", ()=>{plusDivs(-1,images)})
  right.addEventListener("click", ()=>{plusDivs(1,images)})
})


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

}

functionplusDivs(n,x) { 
  // increment the value for the slideIndex and show the slide
  slideIndex += n;
  showDivs(x);
}

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