I am trying to have more than one function start automatically on page load. However, I can only get the first function to work, while the second is ignored. I have two slideshows (adapted from w3schools) that do not automatically load the first image slide, and only display an image after clicking on the arrows to change to the next slide, then they display properly. However I want both of these slideshows to automatically display their first slide right as the page loads. Here's what I've got, and what I've tried:
(Go easy on me, I'm a JavaScript novice)
var slideIndex = 1;
var slideIndex2 = 1;
showSlides(slideIndex);
showSlides2(slideIndex2);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function plusSlides2(m) {
showSlides2(slideIndex2 += m);
}
function currentSlide2(m) {
showSlides2(slideIndex2 = m);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
};
if (n < 1) {
slideIndex = slides.length
};
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
};
slides[slideIndex - 1].style.display = "block";
};
function showSlides2(m) {
var j;
var slides2 = document.getElementsByClassName("mySlides2");
if (m > slides2.length) {
slideIndex2 = 1
};
if (m < 1) {
slideIndex2 = slides2.length
};
for (j = 0; j < slides2.length; j++) {
slides2[j].style.display = "none";
};
slides2[slideIndex2 - 1].style.display = "block";
};
function start() {
showSlides(1);
showSlides2(1);
};/* Slideshow Styles
Adapted from:
https://www.w3schools.com/howto/howto_js_slideshow.asp */
* {
box-sizing: border-box
}
/* Slideshow container */
.slideshow-container {
display: block;
float: left;
max-width: 1000px;
height: 450px;
min-width: 425px;
position: relative;
margin: 0px 15px 0px 0px;
width: 60%;
}
.mySlides,
.mySlides2 {
height: 450px;
line-height: 450px;
margin: auto !important;
text-align: center !important;
display: none;
width: 99% !important;
}
.mySlides img,
.mySlides2 img {
/*margin: auto;*/
max-height: 450px;
max-width: 425px;
height: auto;
width: auto;
}
/* Next & previous buttons */
.slprev,
.slnext {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: black;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.slnext {
right: 0;
border-radius: 3px 0 0 3px;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* 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
}
}<html>
<body onload="start();">
<header></header>
<section>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 12 </div>
<img src="http://cdn3-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-21.jpg" />
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 12 </div>
<img src="http://cdn2-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-8.jpg" />
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 12 </div>
<img src="http://cdn1-www.dogtime.com/assets/uploads/gallery/30-impossibly-cute-puppies/impossibly-cute-puppy-2.jpg" />
</div>
<!-- And so on -->
<div class="slideshow-arrows">
<a class="slprev" onClick="plusSlides(-1)">❰</a>
<a class="slnext" onClick="plusSlides(1)">❱</a>
</div>
</div>
<div class="slideshow-container">
<div class="mySlides2 fade">
<div class="numbertext">1 / 9 </div>
<img src="http://cdn3-www.cattime.com/assets/uploads/2011/08/best-kitten-names-1.jpg" />
</div>
<div class="mySlides2 fade">
<div class="numbertext">2 / 9 </div>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" />
</div>
<div class="mySlides2 fade">
<div class="numbertext">3 / 9 </div>
<img src="http://leecamp.net/wp-content/uploads/kitten-3.jpg" />
</div>
<!-- And so on -->
<div class="slideshow-arrows">
<a class="slprev" onClick="plusSlides2(-1)">❰</a>
<a class="slnext" onClick="plusSlides2(1)">❱</a>
</div>
</div>
</section>
</body>
</html>As you can see, I just copied the original JavaScript from w3schools and changed all the variables to new ones for the second one. I'm sure there is a way better way of doing that, but at least it does work. Now, To fix the problem of the first slide not showing up automatically, I originally added to my body:
<body onload="showSlides(1);">
Works perfect to display my first slide on load. It also works to automatically display the first slide on my second slideshow with this:
<body onload="showSlides2(1);">
However It only loads the first when I try:
<body onload="showSlides(1);showSlides2(1);">
So no good. This is where I scoured the internet for solutions. I saw this one on here about combining them into a different function. That's when I switched to making a JavaScript function called "start" to use both of my functions and changed the onload to :
function start() {
showSlides(1);
showSlides2(1);
};
Still only loads the first. So I switched their order (putting showSlide2(1); first) and then the second one would load, and the first one wouldn't.
So I searched for another method and came across examples of using "addEventListener" to accomplish this. However, trying to use that causes neither to load - and I'm guessing it's because I don't know how to properly use it. I removed the start function, and added the "addEventListener" before the "showSlides" and "showSlides2" functions:
document.addEventListener("load", showSlides);
document.addEventListener("load", showSlides2);
I also tried it including the 1 - such as document.addEventListener("load", showSlides(1)); - but that did nothing either. I'm hoping it's as simple as fixing the syntax, but I just can't seem to figure it out myself.
So here's the question: How do I get both functions to occur on page load?
If it matters, I'm using Firefox 51.0.1 and Chrome 56.0.2924.87 to test it, same results for both. Thank you for your time.
