At the moment I'm trying to create a slideshow for pictures (when arrow is clicked, another picture slides in, all pictures are in a row in html). I'm not using scroll method. Images are moving, but seems like I can't stop the interval. I wanted to ask how to stop the interval? What is something that I'm missing?
const icons = document.querySelectorAll(".icons i");
const imageDiv = document.querySelector(".imageDiv");
let positionRight = 0;
function addPositionRight () {
positionRight += 1;
imageDiv.style.right = `${positionRight}%`;
}
icons[1].onclick = () => {
setInterval(addPositionRight, 10);
if (positionRight === 100) {
clearInterval(addPositionRight)
}
}setInterval return an identifier which allow you to clear the interval
let myInterval;
function addPositionRight () {
positionRight += 1;
imageDiv.style.right = `${positionRight}%`;
if (positionRight === 100) {
clearInterval(myInterval);
}
}
myInterval = setInterval(addPositionRight, 10);
The setInterval method returns a pointer to that interval, you then just pass it to the clearInteral
const interval = setInterval(() => {
console.log('inside interval');
}, 500);
setTimeout(() => clearInterval(interval), 2000)
You have to use clearInterval method as follow,
const stopInterval = setInterval(addPositionRight, 10);
clearInterval(stopInterval) //<----- use it where you want to stop it.
more information: https://www.w3schools.com/jsref/met_win_clearinterval.asp