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);