Im trying to figure out how to make an auto scrolling in slider in pure JS. I need slides to scroll every n time, for example 5 secs, can I somehow renew the timer after manual scrolling?
HTML + CSS + JS: https://jsfiddle.net/k72nth41/
Js code:
let slideIndex = 1;
showSlides(slideIndex);
let prev = document.getElementById ('prev');
let next = document.getElementById ('next');
next.addEventListener ("click", function () {
showSlides(slideIndex += 1);
});
prev.addEventListener ("click", function () {
showSlides(slideIndex -= 1);
});
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let slides = document.getElementsByClassName("myslide");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (let slide of slides) {
slide.style.display = "none";
}
slides[slideIndex - 1].style.display = "flex";
}
let timer = setInterval(function(){
slideIndex++;
showSlides(slideIndex);
},5000);
Aucun commentaire:
Enregistrer un commentaire