Cuando la página cambia de tamaño, "sliderContainerWidth" se mantiene con el mismo ancho, pero si actualizo la página en cualquier ancho, funciona bien. Intenté usar el evento de cambio de tamaño, como pueden ver, no pude solucionarlo. No se actualiza sin refrescar la página..
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); }); //mousevntSi entiendo su problema correctamente, debe actualizar el valor dentro de las funciones de su evento. No se actualizará si no se está configurando. La razón por la que solo se configura cuando actualiza es porque todo el javascript de nivel superior se lee cuando la página se carga por primera vez.
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; }