How can I make this slider run automatically with previous/next controls?
It's working fine when I click on the previous and next buttons, but the sliders are not running automatically. Also, when I move the cursor to any of the slides it won't pause on mouse up.
var slideIndex = 0;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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, 1000);
}<div class="slideshow-container">
<div class="mySlides fade">
<a href="https://app.dellyranks.com/gzswVYPXlW"><img src="/imgs/hol_str_08mar.jpg" style="width:100%"></a>
</div>
<div class="mySlides fade">
<a href="https://app.dellyranks.com/ePCBiHZaqU"><img src="/imgs/amz_dls_05mar.jpg" style="width:100%"></a>
</div>
<div class="mySlides fade">
<a href="https://app.dellyranks.com/OfmaRDtoCl"><img src="/imgs/smr_apl_08feb.jpg" style="width:100%"></a>
</div>
<div class="mySlides fade">
<a href="https://app.dellyranks.com/HAmHgVvPni"><img src="/imgs/meg_fas_08mar.jpg" style="width:100%"></a>
</div>
<div class="mySlides fade">
<a href="https://app.dellyranks.com/RkOrndpUuH"><img src="/imgs/spk_str_08mar.jpg" style="width:100%"></a>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center;display:none">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>Maybe to solve your problem, you should try to pass the "SlideIndex" Variable as parameter of the showslides function in your setTimeout.
So your setTimeout code should be
setTimeout(function(){showSlides(SlideIndex+1)},1000)
Or you could even use your plus function
setTimeout(function(){plusSlides(1)},1000)