How to make slideshow last long before moving onto next slide and how to move dots up to the top left of the slideshow

Question

I have got two questions:

1. How do i make the slideshow last longer, before moving onto the next one, because at the moment it is only lasting about 1 second. I have messed around with the following line

setTimeout(showSlides, 2000); // Change image every 2 seconds

But all that does is set it to some sort of delay moving from slide to slide. Where as I want it, so it stay on slide number 1, them waits about 10 seconds ore so and then move onto slide number 2.

2. How do i move the indicating dots to the top left of the slideshow as I change the margin to a negative number, but that just messed the dots completely.

As stated above IO have change the following line:

setTimeout(showSlides, 2000); // Change image every 2 seconds

and change the margins, but nothing.

The following code is for both Q1 & 2.

 var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); 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 } 

 * { box-sizing: border-box; } body { font-family: Verdana, sans-serif; } .mySlides { display: none; } img { vertical-align: middle; } /* Slideshow container */ .slideshow-container { max-width: 100%; position: relative; margin: auto; padding-left: 25px; padding-right: 25px; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: laft; background-color: #000; width: 150px; margin-left: 15px; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 0px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; float: left; } .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 } } 

 My HTML Is: <div class="slideshow-container"> <div class="mySlides fade"> <img src="img/1.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <img src="img/1.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <img src="img/1.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> 

Here is a screenshot of the slideshow with an indication of where I wish the dots to be.

https://imgur.com/EiC4vSu

Any help appreciated and thank you in advance

Answer 1

Changing your timeout to 10 seems to stay on one slide for 10 seconds. setTimeout(showSlides, 10000);

I know you had said you previously tried this though.

 var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); 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, 10000); // Change image every 2 seconds } 

 * { box-sizing: border-box; } body { font-family: Verdana, sans-serif; } .mySlides { display: none; } img { vertical-align: middle; } /* Slideshow container */ .slideshow-container { max-width: 100%; position: relative; margin: auto; padding-left: 25px; padding-right: 25px; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: laft; background-color: #000; width: 150px; margin-left: 15px; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 0px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; float: left; } .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 } } 

 <div class="slideshow-container"> <div class="mySlides fade"> <img src="img/1.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <img src="img/1.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <img src="img/1.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> 

Answer 2

Question 1:

Change the below to "Wait" before triggering the next image

setTimeout(showSlides, 5000); // Change image every 5 seconds

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

Change fade animation levels if you want the transition between images to have some delay

-webkit-animation-duration: 2s;

and

animation-duration: 2s;

Question 2:

Simply move your dots div before the container div

 var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); 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, 5000); // Change image every 2 seconds } 

 * { box-sizing: border-box; } body { font-family: Verdana, sans-serif; } .mySlides { display: none; } img { vertical-align: middle; } /* Slideshow container */ .slideshow-container { max-width: 100%; position: relative; margin: auto; padding-left: 25px; padding-right: 25px; } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: laft; background-color: #000; width: 150px; margin-left: 15px; } /* The dots/bullets/indicators */ .dot { height: 15px; width: 15px; margin: 0px 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; float: left; } .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 } } 

 My HTML Is: <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <div class="slideshow-container"> <div class="mySlides fade"> <img src="https://www.mediawiki.org/static/images/project-logos/mediawikiwiki.png" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <img src="https://www.mediawiki.org/static/images/project-logos/mediawikiwiki.png" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <img src="https://www.mediawiki.org/static/images/project-logos/mediawikiwiki.png" style="width:100%"> <div class="text">Caption Three</div> </div> </div>