vendredi 26 février 2021

Slider auto scrolling

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