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!

Solution

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