I am trying to create multiple slideshows, each in a different tab on the same page.
Although I am not an expert, I am attempting to figure out how to have the slideshow repeat with buttons controlling each one separately.
When adding the complete script to the HTML and including all ".mySlides" CSS classes at the top of the page, it displays all slideshows on one page and they function correctly. However, I require them to be separate.
<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>
To achieve this, I duplicate the HTML code for the slideshows and adjust the IDs accordingly.
In each section, I add the ".mySlides" class to the CSS styling at the beginning of the page, only including the relevant slideshow for that specific section.
.mySlides3 {display: none}
Instead of including all:
.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6,
.mySlides7, .mySlides8 {display: none}
For each individual slideshow, I also change the "prev" and "next" class values based on the slideshow being used.
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
This separates the slideshows, but when implementing this in another section, it displays different slideshows with unique images, yet the arrow controls do not work.
To address this issue, I modify the script by removing unnecessary slideIndex, slideId, and showSlides values from the code so that it only includes what is essential for the specific slideshow. For example, for "mySlides3," the script would look 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>