0

I need multiple slideshows but all of them in different tabs in the same page.

Honestly i'm not an expert but i'm trying to understand how to repeat the slideshow with the buttons running for each one.

If i add this complete script to the HTML with all of the ".mySlides" CSS classes at the top of the page, it shows all of the slideshows in one page an all of them work fine, but i need them separated. 

<script>
var slideIndex = [1,1,1,1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4",  
"mySlides5", "mySlides6", "mySlides7", "mySlides8"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
showSlides(1, 5);
showSlides(1, 6);
showSlides(1, 7);

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";  
}
</script>

So i duplicate the slideshows HTML and change the IDs accordingly.

In every window i add the ".mySlides" class to the CSS at the top of the page and i add just the one i'm using in that window. 

.mySlides3 {display: none}

Instead of leave all:

.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6,  
.mySlides7, .mySlides8 {display: none}

In every slideshow i also change the value of "prev" "next" class according to the slideshow i'm using.

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

This is the script of one separated slideshows but when i repeat it in another window, it shows different slideshows with different images but the arrows of all of them doesn't work.

I've been erasing slideIndex, slideId and showSlides values, leaving just the ones that precede the slideshow i'm using, for "mySlides3" i leave it like this: 

<script>
var slideIndex = [1,1,1];
var slideId = ["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";  
}
</script>
Dave
  • 25
  • 6