I have searched through various threads with similar questions, but I cannot seem to find information that is relevant to the functions I am working with.
My issue lies with creating an automatic slideshow using HTML, CSS, and JS. While it works perfectly for a single slideshow, I am unable to get it to work for two slideshows simultaneously.
The JavaScript code I have tried includes different approaches, including creating separate functions for each slideshow. Unfortunately, none of these attempts have been successful.
// Necessary variables
var images = [];
var i = 0;
var time = 2000;
// List of images
images[0] = "images/nighttime.png";
images[1] = "images/natur.png";
images[2] = "images/shark_1.png";
images[3] = "images/shark_2.jpg";
function autoSlide() {
document.slide.src = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("autoSlide()", time);
}
window.onload = autoSlide;
/* Slideshow 2 */
// Necessary variables
var images_one = [];
var j = 0;
// List of images
images_one[0] = "images/innredning_1.png";
images_one[1] = "images/innredning_2.png";
images_one[2] = "images/innredning_bad.jpg";
function autoSlide_box2() {
document.slide.src = images_one[j];
if (j < images_one.length - 1) {
j++;
} else {
j = 0;
}
setTimeout("autoSlide()_box2", time);
}
window.onload = autoSlide_box2;
In terms of the HTML structure, the overlay__content element is specifically designed for the openNav() function and should not interact with the slideshow functionality.
<section class="index-content">
<!-- This container displays the images which change automatically -->
<div class="container">
<figure id="slideshow" onclick="openNav()">
<img src="images/nighttime.png" name="slide" class="pictures">
</figure>
</div>
<!-- This div and its contents are invisible by default and appear when an image is clicked -->
<div id="nav" class="overlay">
<div class="overlay__content1">
<a href="#" class="closeButton" id="closeButton" onclick="closeNav()" style="display:none;"> × </a>
<a href="#" class="arrow" id="moveRight" onclick="plusSlides(1)" style="display:none;"></a>
<a href="#" class="arrow" id="moveLeft" onclick="plusSlides(-1)" style="display:none;"></a>
<div class="mySlides fade">
<img src="images/nighttime.png">
</div>
<div class="mySlides fade">
<img src="images/natur.png">
</div>
<div class="mySlides fade">
<img src="images/shark_1.png">
</div>
<div class="mySlides fade" id="threenfour">
<img src="images/shark_2.jpg">
</div>
</div>
</div>
</section>
<section class="index-content2">
<div class="containerLeft">
<figure id="slideshow" onclick="openNav()">
<img src="images/innredning_1.png" name="slide" class="pictures">
</figure>
</div>
<!-- This div and its contents are invisible by default and appear when an image is clicked -->
<div id="nav" class="overlay">
<div class="overlay__content2">
<div class="mySlides fade">
<img src="images/innredning_1.png">
</div>
<div class="mySlides fade">
<img src="images/innredning_2.png">
</div>
<div class="mySlides fade">
<img src="images/innredning_bad.jpgw">
</div>
</div>
</div>
</section>