I am following the tutorial here, and I would like to add more than two slideshows on a page. I tried this:
<h4>10 Shot Photo Challenge #1</h4>
<div class="slideshow-container">
<div class="mySlides1">
<div class="numbertext">1 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_BlackAndWhite.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Contrast.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Emotion.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_FavoriteColor.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">5 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Misc.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">6 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Numbers.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">7 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Outside.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">8 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_Rule_of_Thirds.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">9 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_StartingWithB.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">10 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotone/Gutowski_UpClose.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<br>
<br>
<h4>10 Shot Photo Challenge #2</h4>
<br>
<div class="slideshow-container">
<div class="mySlides2">
<div class="numbertext">1 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_happy.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">2 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/Gutowski_January.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">3 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2873.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">4 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2931.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">5 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2985.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">6 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_2986.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">7 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3031.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">8 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3037.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">9 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_3041.JPG" style="width:100%">
</div>
<div class="mySlides2">
<div class="numbertext">10 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshottwo/IMG_E3040.JPG" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<br>
<br>
<h4>10 Shot Photo Challenge #3</h4>
<br>
<div class="slideshow-container">
<div class="mySlides3">
<div class="numbertext">1 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0139.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">2 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0144.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">3 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0157.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">4 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0158.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">5 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0159.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">6 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0160.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">7 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0192.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">8 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0199.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">9 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0936.JPG" style="width:100%">
</div>
<div class="mySlides3">
<div class="numbertext">10 / 10</div>
<img alt="this is required and i dont want to put this" src="multimedia/tenshotthree/IMG_0945.JPG" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<script>
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";
}
</script>
This made 2 slideshows, but the third one didn't work. How can I get a third slideshow onto this webpage? ZIP file attached with all website files. 10shot.html is the file I am having trouble with.
Alex's Website.zip
