JavScript - clearTimeout doesn't work on click event

66 Views Asked by At

I have a problem with clearTimeout. The program does not want to stop the slider after pressing the button. I am trying to solve this problem for quite a long time but without success. Does anyone have any advice what I could improve to make it work?

slider.js file which chandles clicking events

import { slide } from "./slides.js";
const slideOne = document.querySelector(".slide-one");
const slideTwo = document.querySelector(".slide-two");
const slideThree = document.querySelector(".slide-three");

let timeoutHandle = setTimeout(slide, 5000);

export function firstSlide() {

let firstSliderNav = document.querySelector(".slide-one #first-slide-nav");
let secondSliderNav = document.querySelector(".slide-one #second-slide-nav");
let thirdSliderNav = document.querySelector(".slide-one #third-slide-nav");

firstSliderNav.addEventListener("click", function () {

    slideOne.classList.add("active");
    slideTwo.classList.remove("active");
    slideThree.classList.remove("active");
    
})

secondSliderNav.addEventListener("click", function () {


    slideOne.classList.remove("active");
    slideTwo.classList.add("active");
    slideThree.classList.remove("active");
    
})


thirdSliderNav.addEventListener("click", function () {

    slideOne.classList.remove("active");
    slideTwo.classList.remove("active");
    slideThree.classList.add("active");
})

}
clearTimeout(timeoutHandle);
firstSlide();

 export function secondSlide() {
    let firstSliderNav = document.querySelector(".slide-two #first-slide-nav");
    let secondSliderNav = document.querySelector(".slide-two #second-slide-nav");
    let thirdSliderNav = document.querySelector(".slide-two #third-slide-nav");

    firstSliderNav.addEventListener("click", function () {
        slideOne.classList.add("active");
        slideTwo.classList.remove("active");
        slideThree.classList.remove("active");
        
    })
    
    secondSliderNav.addEventListener("click", function () {
        slideOne.classList.remove("active");
        slideTwo.classList.add("active");
        slideThree.classList.remove("active");
        
    })
    
    
    thirdSliderNav.addEventListener("click", function () {
        slideOne.classList.remove("active");
        slideTwo.classList.remove("active");
        slideThree.classList.add("active");
    })
    
    }
    clearTimeout(timeoutHandle);
    secondSlide();

    export function thirdSlide() {
        let firstSliderNav = document.querySelector(".slide-three #first-slide-nav");
        let secondSliderNav = document.querySelector(".slide-three #second-slide-nav");
        let thirdSliderNav = document.querySelector(".slide-three #third-slide-nav");        

        firstSliderNav.addEventListener("click", function () {
            slideOne.classList.add("active");
            slideTwo.classList.remove("active");
            slideThree.classList.remove("active");
        })
        
        secondSliderNav.addEventListener("click", function () {
            slideOne.classList.remove("active");
            slideTwo.classList.add("active");
            slideThree.classList.remove("active");
        })
        
        
        thirdSliderNav.addEventListener("click", function () {
            slideOne.classList.remove("active");
            slideTwo.classList.remove("active");
            slideThree.classList.add("active");
            
        })
        
        }
        clearTimeout(timeoutHandle);
        thirdSlide();

slides.js file which chandles automatic slideshow

import { firstSlide } from "./slider.js";
import { secondSlide } from "./slider.js";
import { thirdSlide } from "./slider.js";

const slides = document.querySelectorAll(".slider");


export function slide() {

    const active = document.querySelector(".active");
    active.classList.remove("active");

    
    if (active.nextElementSibling) {
        active.nextElementSibling.classList.add("active");
        
        
    } else {
        slides[0].classList.add("active");
    }
 
    setTimeout(slide, 5000);

}

window.onload = setTimeout(slide, 5000);
0

There are 0 best solutions below