CODEWITHSUNDEEP
javascriptslideshow
nirshh5
nirshh5

Reputation: 43

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 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!

Upvotes: 0

Views: 1279

Answers (2)

enxaneta
enxaneta

Reputation: 33024

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>

Upvotes: 0

Dustbin Saves you
Dustbin Saves you

Reputation: 126

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

Upvotes: 1

Related Questions