I'm happy with how this slideshow works, but I would like it to be automatic after 3 seconds in the event the user doesn't manually advance the slide.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove("active");
}
slides[slideIndex - 1].classList.add("active");
};
You can use setInverval to automatically execute plusSlides at regular intervals. If the user interacts manually, you can use clearInterval to stop the automatic advancement of slides.
var interval = setInterval(function() {
plusSlides(1)
}, 3000);
This would advance the slide by one every 3000ms (3 seconds). If you now want to disable the automatic advancement (maybe because a user interacted with something) you can use:
clearInterval(interval);