I found two codes online from w3schools.com and I have been trying to combine them into a working code. I have been at it for two days and for the life of me cannot figure out how to make the dots work with the images. The issue I have noticed is that the dots when clicked start to throw the images off sync and they start speeding up. Im at a bit of a loss here. Any help would be appreciated. Here is a "working" example: JSFiddle
<!DOCTYPE html>
<html>
<style>
#slideshow_container {display: inline-block; max-width: 800px; max-height: 320px;}
#slideshow_nav {position: absolute; z-index: 2; top: 0px; width: 800px; height: 320px;}
.mySlides {display: none; width: 800px; height: 320px;}
.w3-center {top: -40px; left: 0px;}
#arrow-left {text-align: right;}
#arrow-right {text-align: left;}
.dots {z-index: 3; height: 13px; width: 13px; padding: 0; display: inline-block; border-radius: 100%; color: #FFF; background: #ffffff; border: 1px solid #000000;}
.dots-red {z-index: 3; height: 13px; width: 13px; padding: 0; display: inline-block; border-radius: 100%; color: #FFF; background: #ff0000; border: 1px solid ff0000;}
#arrow-left, #arrow-right, .dots {cursor: pointer; color: #F00;}
</style>
<body>
<div id="slideshow_container" onmouseover="stop()" onmouseout="start()">
<img class= "mySlides" src= "https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg">
<img class= "mySlides" src= "https://www.stockvault.net/data/2007/03/01/102413/preview16.jpg">
<img class= "mySlides" src= "https://image.shutterstock.com/image-photo/da-lat-vietnam-sun-rise-600w-440121226.jpg">
<table id="slideshow_nav" width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="40px"><div id="arrow-left" onclick= "plusDivs(-1) ">❮</div></td>
<td align="center" valign="bottom">
<span class="dots" id="dot1" onclick= "currentDiv(1) "></span>
<span class="dots" id="dot2" onclick= "currentDiv(2) "></span>
<span class="dots" id="dot3" onclick= "currentDiv(3) "></span>
</td>
<td valign="middle" width="40px"><div id="arrow-right" onclick= "plusDivs(1) ">❯</div></td>
</tr>
</table>
<script>
function stop()
{document.getElementById("slideshow_container").stop;}
function start()
{document.getElementById("slideshow_container").start;}
var myIndex = 0;
showDivs(myIndex);
function plusDivs(n) {showDivs(myIndex += n);}
function currentDiv(n) {showDivs(myIndex = n);}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dots");
if (n > x.length) {myIndex = 1}
if (n < 1) {myIndex = x.length}
for (i = 0; i < dots.length; i++) {
x[i].style.display = "none";
dots[i].className = dots[i].className.replace( "dots-red"," ");
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
dots[myIndex-1].className += " dots-red";
setTimeout(showDivs, 2000);
}
</script>
</body>
</html>
You need to clear the timeout using clearTimeout() each time showDiv() is called.
This is because when you click a dot, it'll call showDiv() which will create a new timeout that's concurrent with the one that already exists, and those timeouts call showDiv themselves, to keep their interval going.
So by clearing the current timeout which is getting ready to call showDiv, we reset the interval loop.
function stop() {
document.getElementById("slideshow_container").stop;
}
function start() {
document.getElementById("slideshow_container").start;
}
var myIndex = 0;
function plusDivs(n) {
showDivs(myIndex += n);
}
function currentDiv(n) {
showDivs(myIndex = n);
}
let timeout; // Declare the variable we'll save our timeout to outside the function that sets the timeout
function showDivs(n) {
clearTimeout(timeout); // Clear the timeout each time the function is called
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dots");
if (n > x.length) {
myIndex = 1
}
if (n < 1) {
myIndex = x.length
}
for (i = 0; i < dots.length; i++) {
x[i].style.display = "none";
dots[i].className = dots[i].className.replace("dots-red", " ");
}
myIndex++;
if (myIndex > x.length) {
myIndex = 1
}
x[myIndex - 1].style.display = "block";
dots[myIndex - 1].className += " dots-red";
timeout = setTimeout(showDivs, 2000); // Save the timeoutID to the variable we declared to be able to reset it
}
showDivs(myIndex);#slideshow_container {
display: inline-block;
max-width: 800px;
max-height: 320px;
}
#slideshow_nav {
position: absolute;
z-index: 2;
top: 0px;
width: 800px;
height: 320px;
}
.mySlides {
display: none;
width: 800px;
height: 320px;
}
.w3-center {
top: -40px;
left: 0px;
}
#arrow-left {
text-align: right;
}
#arrow-right {
text-align: left;
}
.dots {
z-index: 3;
height: 13px;
width: 13px;
padding: 0;
display: inline-block;
border-radius: 100%;
color: #FFF;
background: #ffffff;
border: 1px solid #000000;
}
.dots-red {
z-index: 3;
height: 13px;
width: 13px;
padding: 0;
display: inline-block;
border-radius: 100%;
color: #FFF;
background: #ff0000;
border: 1px solid ff0000;
}
#arrow-left,
#arrow-right,
.dots {
cursor: pointer;
color: #F00;
}<div id="slideshow_container">
<img class="mySlides" src="https://appraw.com/static/previews/downloads/d/z/k/p-desert-zK6WoOEYks-1.jpg">
<img class="mySlides" src="https://www.stockvault.net/data/2007/03/01/102413/preview16.jpg">
<img class="mySlides" src="https://image.shutterstock.com/image-photo/da-lat-vietnam-sun-rise-600w-440121226.jpg">
<table id="slideshow_nav" width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="40px">
<div id="arrow-left" onclick="plusDivs(-1) ">❮</div>
</td>
<td align="center" valign="bottom">
<span class="dots" id="dot1" onclick="currentDiv(0) "></span>
<span class="dots" id="dot2" onclick="currentDiv(1) "></span>
<span class="dots" id="dot3" onclick="currentDiv(2) "></span>
</td>
<td valign="middle" width="40px">
<div id="arrow-right" onclick="plusDivs(1) ">❯</div>
</td>
</tr>
</table>