When the page resizes "sliderContainerWidth" sticks with the same width, but if i refresh the page on any width its works fine.. I've tried using resize event as u guys can see i couldn't fixed it. It's not updating without refreshing the page..
let counter = 0;
const back = document.querySelector("#back");
const next = document.querySelector("#next");
const sliderContainer = document.querySelector("#slider-container");
var sliderContainerWidth =
document.querySelector("#slider-container").clientWidth;
const slider = document.querySelector("#slider");
const max = document.querySelectorAll(".slide").length - 1;
window.addEventListener("resize", sliderFunc);
next.addEventListener("click", sliderFunc);
function sliderFunc() {
if (counter < max) {
counter++;
slider.style.left = "-" + sliderContainerWidth * counter + "px";
} else {
counter = 0;
slider.style.left = "-" + sliderContainerWidth * counter + "px";
}
}
window.addEventListener("resize", backEvent);
back.addEventListener("click", backEvent);
function backEvent() {
if (counter >= 1) {
counter--;
slider.style.left = "-" + sliderContainerWidth * counter + "px";
} else {
counter = max;
slider.style.left = "-" + sliderContainerWidth * counter + "px";
}
}
//mousevnt
let timer = setInterval(sliderFunc, 12000);
sliderContainer.addEventListener("mouseover", () => {
clearInterval(timer);
});
sliderContainer.addEventListener("mouseout", () => {
timer = setInterval(sliderFunc, 12000);
});
//mousevnt
If I'm understanding your issue correctly, you need to update the value inside of your event functions. It will not update if it's not getting set. The reason it only gets set when you refresh is because all the top-level javascript gets read when the page first loads.
function sliderFunc() {
if (counter < max) {
counter++;
slider.style.left = "-" + sliderContainerWidth * counter + "px";
} else {
counter = 0;
slider.style.left = "-" + sliderContainerWidth * counter + "px";
}
sliderContainerWidth = document.querySelector("#slider-container").clientWidth;
}