How do you get multiple automatic slideshows on one page? - html

Question

I am currently following the W3 HTML/CSS tutorial on getting multiple slideshows on one page. The tutorial has examples for multiple slideshows (manual) or ONE automatic slideshow, but no examples for multiple (automatic) slideshows. I attempted to combine the tutorial, keeping in mind that the indexes for each individual slideshow needed to be intact, but no matter what I do, it would not automatically transition.
This is the link to the W3 tutorial: https://www.w3schools.com/howto/howto_js_slideshow.asp(https://www.w3schools.com/howto/howto_js_slideshow.asp)
This is the code that I attempted to change/use to automatically transition the slides:
var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
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";
}
n++; /* WHAT I ADDED */
x[slideIndex[no]-1].style.display = "block";
setTimeout(showSlides(n, x), 2000); /* WHAT I ADDED */
}
The capitalized comment next to the code line is what I added to the tutorial code. Otherwise, the rest of the code is exactly the same as the tutorial with no changes. I have tried setInterval and moving the code in different spots, but nothing works.

Answer 1

Just a couple of changes and you are there. I also added an option to change delays, take a look:
/* Find all slideshow containers */
var slideshowContainers = document.getElementsByClassName("slideshow-container");
/* For each container get starting variables */
for(let s = 0; s < slideshowContainers.length; s++) {
/* Read the new data attribute */
var cycle = slideshowContainers[s].dataset.cycle;
/* Find all the child nodes with class mySlides */
var slides = slideshowContainers[s].querySelectorAll('.mySlides');
var slideIndex = 0;
/* Now we can cycle slides, but this recursive function must have parameters */
/* slides and cycle never change, those are unique for each slide container */
/* slideIndex will increase during each iteration */
showSlides(slides, slideIndex, cycle);
};
/* Function is alsmost same, but now it uses 3 new parameters */
function showSlides(slides, slideIndex, cycle) {
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
};
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1
};
slides[slideIndex - 1].style.display = "block";
/* Calling same function, but with new parameters and cycle time */
setTimeout(function() {
showSlides(slides, slideIndex, cycle)
}, cycle);
};
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
}
.mySlides {
display: none;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
max-width: 320px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.text {
font-size: 11px
}
}
<h2>Automatic Slideshow</h2>
<p>Change image every 2 seconds:</p>
<div class="slideshow-container" data-cycle="2000">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://placeimg.com/320/240/animals">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://placeimg.com/320/240/nature">
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://placeimg.com/320/240/people">
<div class="text">Caption Three</div>
</div>
</div>
<p>Change image every 3 seconds:</p>
<div class="slideshow-container" data-cycle="3000">
<div class="mySlides fade">
<div class="numbertext">1 / 2</div>
<img src="https://placeimg.com/320/240/animals">
<div class="text">Caption 1</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 2</div>
<img src="https://placeimg.com/320/240/nature">
<div class="text">Caption 2</div>
</div>
</div>
Also on JSFiddle
What is most important here is the scope of Javascript variables. I suggest reading about JS Variables, than google javascript scope variables and you may find articles like this one, or that one.