Develop Reference

Issue with multiple automatic slideshows on javascript

I'm an absolute newbie on Javascript, but I'm trying to put together three separate automatic slideshows on the same page. I've found a couple of helpful links from W3Schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto & https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_rr), but when using either, I can't include all three slideshows together, or if I repeat the same <script>three times (changing the document.getElementsByClassName) all of the slideshows seem to collapse. I've also found some options for multiple slideshows, but I have no idea how to make them automatic. CSS is no problem, I just can't figure out the combination in the script to make all three slideshows work simultaneously and automatic.
Thanks in advance!
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slide1", "slide2", "slide3");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>
<div id="container1">
<img id="aa" class="slide1" src="id1.png">
<img id="bb" class="slide1" src="id2.png">
<img id="cc" class="slide1" src="id3.png">
</div>
<div id="container2">
<img id="dd" class="slide2" src="cr1.png">
<img id="ee" class="slide2" src="cr2.png">
<img id="ff" class="slide2" src="cr3.png">
</div>
<div id="container3">
<img id="ab" class="slide3" src="id1.png">
<img id="hh" class="slide3" src="id2.png">
<img id="ii" class="slide3" src="id3.png">
</div>

I had the same problem, I gave each slideshow a different class, then I included a separate function for each class and then I isolated each function by wrapping it in the below
;(function() {
JS code
})()
I've edited your code so it should work now :)
<div id="container1">
<img id="aa" class="slide1" src="id1.png">
<img id="bb" class="slide1" src="id2.png">
<img id="cc" class="slide1" src="id3.png">
</div>
<div id="container2">
<img id="dd" class="slide2" src="cr1.png">
<img id="ee" class="slide2" src="cr2.png">
<img id="ff" class="slide2" src="cr3.png">
</div>
<div id="container3">
<img id="ab" class="slide3" src="id1.png">
<img id="hh" class="slide3" src="id2.png">
<img id="ii" class="slide3" src="id3.png">
</div>
<script>
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide1");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide2");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()
;(function() {
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("slide3");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
})()
</script>

Javascript Picture Slideshow

I'm using the basic code shown on https://www.w3schools.com/w3css/w3css_slideshow.asp to create an automatic slideshow for a website. Everything seems to be the same and for some reason, the slideshow is not working.
HTML:
<article id="elements">
<h2 class="major">Pictures</h2>
<div class="slideshow">
<script src="assets/slideshow.js"></script>
<img id="slide" src="images/colin1.jpg" style="width:75%">
<img id="slide" src="images/luke.jpg" style="width:75%">
<img id="slide" src="images/shep.jpg" style="width:75%">
</div>
CSS:
body #elements .slideshow #slide {
display: none;
}
JS:
var index = 0;
slideshow();
function slideshow() {
var i, x;
x = document.getElementById("slide");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
index++;
if (index > x.length) {
index = 1;
}
x[index-1].style.display = "block";
setTimeout(slideshow, 2000);
}
I appreciate anyone's help, and any ideas!

Agree with Gordon.
When selecting by ID only one element will be selected.
If you switch to using classes. e.g.
<img class="slide" src="images/colin1.jpg" style="width:75%">
Then you can select all the images using.
x = document.querySelectorAll(".slide");
which will return a nodeList, a similar construction to an Array but with different methods; that can be accessed via index. x[0], x[1], x[2].
hope this helps.

getElementById only returns one item, not an array, so you cannot use it to get all slides, use getElementsByClassName (https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName), and change id for classes:
var index = 0;
slideshow();
function slideshow() {
var i, x;
x = document.getElementsByClassName("slide");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
index++;
if (index > x.length) {
index = 1;
}
x[index - 1].style.display = "block";
setTimeout(slideshow, 2000);
console.log('changed image')
}
#elements .slideshow #slide {
display: none;
}
<article id="elements">
<h2 class="major">Pictures</h2>
<div class="slideshow">
<script src="assets/slideshow.js"></script>
<img class="slide" src="images/colin1.jpg" style="width:75%">
<img class="slide" src="images/luke.jpg" style="width:75%">
<img class="slide" src="images/shep.jpg" style="width:75%">
</div>
</article>

How to randomize the slideshow image in HTML

I have the HTML code below and want to randomize the images. How to accomplish it?
Below the code is part of html, and the code is running to show the images in order. I don't know how to ulter the javascripte and want the images can be showed randomly.
Thank you for your concern and hopefully somebody can help.
Lawrence
<div class="slideshow-container">
<div class="mySlides fade">
<img src="http://i.dailymail.co.uk/i/pix/2017/03/01/14/3DD766C300000578-4271496-image-a-39_1488378897470.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://hips.hearstapps.com/roa.h-cdn.co/assets/16/30/1469467513-01-2016-aston-martin-db9-gt.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202017/Magazine-Articles/April/Google-Auto-Profile-images-2017/PRF-811" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://www.lexus.com/byl2014/pub-share/images/series/lc.png" style="width:100%">
</div>
</div>
<br>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
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";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>

You can generate a random number to choose a random image:
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
var rand = Math.floor((Math.random() * slides.length));
slides[rand].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}

How to set two timeouts?

I am trying to have two separate timeout times in my coursel (so that 2 slides are faster than the others). I have all of my images at 7 seconds but I want my "brands1slide" and "brands2slide" to be 3.5 seconds.
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, 7000);
}
<div class="SlidesDiv" style="max-width:1024px">
<img class="mySlides" id="returnsSlide" alt="returnsSlide" src="img/ReturnsOnly.png" />
<img class="mySlides" id="brands1Slide" alt="brands1Slide" src="img/Brands_1.png" />
<img class="mySlides" id="brands2Slide" alt="brands2Slide" src="img/Brands_2.png" />
<img class="mySlides" id="fsaSlide" alt="brands2Slide" src="img/FSAs.png" />
</div>

One way to do it is to have an array of times specifying the timeout for each slide:
var slideTimes = [7000, 3500, 3500, 7000];
Then you can use that to choose a good timeout for each slide:
setTimeout(carousel, slideTimes[slideIndex - 1]);
Snippet:
var slideTimes = [3500, 3500, 7000, 7000];
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].style.display = "block";
setTimeout(carousel, slideTimes[slideIndex - 1]);
}
<div class="SlidesDiv" style="max-width:1024px">
<img class="mySlides" id="returnsSlide" alt="returnsSlide" src="img/ReturnsOnly.png" />
<img class="mySlides" id="brands1Slide" alt="brands1Slide" src="img/Brands_1.png" />
<img class="mySlides" id="brands2Slide" alt="brands2Slide" src="img/Brands_2.png" />
<img class="mySlides" id="fsaSlide" alt="brands2Slide" src="img/FSAs.png" />
</div>

How to make images a simple slider in js

i only know html, js and css. i'm trying to make the images change every couple of seconds., as in a slideshow.
<script type="text/javascript">
var temp=1;
function slider(){
document.getElementById("pic1").style.display = 'none';
document.getElementById("pic2").style.display = 'none';
document.getElementById("pic3").style.display = 'none';
if(temp==1){
document.getElementById("pic1").style.display = 'block';
}
else if(temp==2){
document.getElementById("pic2").style.display = 'block';
}
else if (temp==3){
document.getElementById("pic3").style.display = 'block';
temp=1;
}
temp++;
setTimeout(slider(),25000);
}
</script>
the head is above, body below.
<div id="rightside" onload="slider()">
<a id="pic1"><img src="photos/hamilton/candyshop.jpg" style="display:block"></a>
<a id="pic2"><img src="photos/hamilton/hamiltonboat.jpg" style="display:none"></a>
<a id="pic3"><img src="photos/hamilton/waterduel.jpg" style="display:none"></a>
</div>

There are multiple errors in this that must all be fixed for it to work.
In the line setTimeout(slider(), 25000), you should pass slider, the function itself, not slider(), the return value of the function. Then you need to call slider() once after defining it to start the whole thing. You can do this in the JavaScript with document.addEventListener instead of the HTML with onload, making the HTML self-contained.
You set the img to display:none in the HTML, and then you set the element with ID pic1 to display: block. But this element isn’t the img, it’s the a. So you end up with a display: block <a> containing a display: none <img>, so nothing shows after all.
When you set temp = 1, immediately after that you run temp++, so picture #1 is never seen again. temp = 0 on that line would fix this, but it is better to make temp loop through “0, 1, 2” and use the modulo operator % that makes numbers loop if they are too high.
I also added alt attributes describing each of the images so the demo will work without the images loading. This would help your users too if they can’t see the images for whatever reason.
A working version:
document.addEventListener("DOMContentLoaded", function(event) {
var temp = 0;
function slider() {
document.getElementById("pic1").style.display = 'none';
document.getElementById("pic2").style.display = 'none';
document.getElementById("pic3").style.display = 'none';
if (temp == 0) {
document.getElementById("pic1").style.display = 'block';
} else if (temp == 1) {
document.getElementById("pic2").style.display = 'block';
} else if (temp == 2) {
document.getElementById("pic3").style.display = 'block';
}
temp = (temp + 1) % 3;
setTimeout(slider, 1500); // decreased delay for demo purposes
}
slider();
});
<div id="rightside">
<a id="pic1" style="display:block">
<img alt="candy shop" src="photos/hamilton/candyshop.jpg">
</a>
<a id="pic2" style="display:none">
<img alt="Hamilton boat" src="photos/hamilton/hamiltonboat.jpg">
</a>
<a id="pic3" style="display:none">
<img alt="water duel" src="photos/hamilton/waterduel.jpg">
</a>
</div>
After getting the code working like the above, you can also reduce the repetition by using loops and functions. With the following version, if you add more pictures, you will only need to change one line of code instead of copying and pasting multiple parts of your code. Splitting your code up into functions that are each simple has the additional benefit that the code is easier to understand and to check for errors in.
document.addEventListener("DOMContentLoaded", function(event) {
var currentIndex = 0;
var numPictures = 3;
function slideshow() {
hideAllPictures();
showPicture(currentIndex);
currentIndex = (currentIndex + 1) % numPictures;
setTimeout(slideshow, 1500);
}
function hideAllPictures() {
for (var i = 0; i < numPictures; i++) {
hidePicture(i);
}
}
function hidePicture(index) {
getPictureElement(index).style.display = 'none';
}
function showPicture(index) {
getPictureElement(index).style.display = 'block';
}
function getPictureElement(index) {
var id = "pic" + (index + 1);
return document.getElementById(id);
}
slideshow();
});
<div id="rightside">
<a id="pic1" style="display:block">
<img alt="candy shop" src="photos/hamilton/candyshop.jpg">
</a>
<a id="pic2" style="display:none">
<img alt="Hamilton boat" src="photos/hamilton/hamiltonboat.jpg">
</a>
<a id="pic3" style="display:none">
<img alt="water duel" src="photos/hamilton/waterduel.jpg">
</a>
</div>

Try this with Pure Javascript and CSS, change only myimage*.jpg to your image name.
<!DOCTYPE html>
<html>
<title>My Simple Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fading{
-webkit-animation:fading 10s infinite;
animation:fading 10s infinite
}
#-webkit-keyframes fading {
0%{opacity:0}
50%{opacity:1}
100%{opacity:0
}
}
#keyframes fading {
0%{opacity:0}
50%{opacity:1}
100%{opacity:0
}
}
</style>
<body>
<div>
<p>Simple Image Carousel</p>
<img class="mySlides fading" src="myimage1.jpg" style="width:100%">
<img class="mySlides fading" src="myimage2.jpg" style="width:100%">
<img class="mySlides fading" src="myimage3.jpg" style="width:100%">
<img class="mySlides fading" src="myimage4.jpg" style="width:100%">
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
setTimeout(carousel, 9000);
}
</script>
</body>
</html>