CODEWITHSUNDEEP
javascripthtmlcssanimationslideshow
Axel S.
Axel S.

Reputation: 43

Slideshow Troubleshooting (Timer & Animation)

I am trying to create a slideshow completely from scratch using html, css and plain javascript but I can't figure out what to do so that when I click one of the slideshow indicators the setInterval() resets its timer (in order to be able to change slide without it directly switching to the next one because there is, for example, only 1 sec left)

I have tried to reset the timer with clearInterval() and then reactivating the setInterval() but when I then click on one of the slideshow indicators the slides start changing at random moments (they don't follow the 6000ms timer of the SetInterval() for some reason).

var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");

function removeClass() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('active');
  }
}

function removeNext() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].classList.remove('next');
  }
}

function slideshow() {
    currentSlide = document.querySelector(".active");
    nextSlide = currentSlide.nextElementSibling;
    if (nextSlide != null) {
        removeClass();
        nextSlide.classList.add('next');
        nextSlide.classList.add('active');
    } else {
        removeClass();
        slides[0].classList.add('next');
        slides[0].classList.add('active');
    }
    removeNext();
}

var slideDelay = setInterval(slideshow, 6000);

document.addEventListener("click", function(event){
    if (event.target.className == "dot") {
        removeClass();
        var dotAttrValue = event.target.getAttribute('data-slide-to');
        slides[dotAttrValue-1].classList.add('active');
        clearInterval(slideDelay);  
        var slideDelay = setInterval(slideshow, 6000);
    }
});

Upvotes: 4

Views: 61

Answers (1)

Bedir
Bedir

Reputation: 586

Having two var declarations creates two separate intervals. Just get rid of the second one and you should be good to go.

var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");

function removeClass() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].classList.remove('active');
    }
}

function removeNext() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].classList.remove('next');
    }
}

function slideshow() {
    currentSlide = document.querySelector(".active");
    nextSlide = currentSlide.nextElementSibling;
    if (nextSlide != null) {
        removeClass();
        nextSlide.classList.add('next');
        nextSlide.classList.add('active');
    } else {
        removeClass();
        slides[0].classList.add('next');
        slides[0].classList.add('active');
    }
    removeNext();
}

var slideDelay = setInterval(slideshow, 6000);

document.addEventListener("click", function (event) {
    if (event.target.className == "dot") {
        removeClass();
        var dotAttrValue = event.target.getAttribute('data-slide-to');
        slides[dotAttrValue - 1].classList.add('active');
        clearInterval(slideDelay);
        slideDelay = setInterval(slideshow, 6000);//Var removed from here.
    }
});

Upvotes: 2

Related Questions