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>