Cómo puedo crear variables independientes para cada elemento en funciones que están siendo disparadas desde eventos delegados? De forma más clara, tengo varios slides de imágenes en una misma página, y uso un contador para desplazarlos, pero al tener un solo contador, al hacer click sobre un slide afecta y termina bugeando a los demás, haciendo que se salten posiciones, o se queden trabados.
Lo que necesito básicamente es que cada slide tenga su propio contador local para que se puedan desplazar independientemente sin afectas a los demás, aquí mi código
let container = document.getElementsByClassName("slides-container");
let click = 0;
for (const slide of container) {
slide.addEventListener("click", delegar);
}
function delegar(e) {
const clase = e.target.classList[0];
const elemento = e.target.parentNode.previousElementSibling;
const puntos = e.target.parentNode;
if (clase === "btnNext") {
moveForward();
} else if (clase === "btnPrev") {
moveBackward();
}
function moveForward() {
switch (click) {
case 0:
elemento.style.transform = "translateX(-33%)";
click++;
break;
case 1:
elemento.style.transform = "translateX(-66%)";
click++;
break;
}
}
function moveBackward() {
switch (click) {
case 2:
elemento.style.transform = "translateX(-33%)";
click--;
break;
case 1:
elemento.style.transform = "translateX(0%)";
click--;
break;
}
}
console.log(click);
}