I am currently working on a slider and have made progress up to this point. However, I am facing an issue where I cannot proceed because I need to identify the index of the item from which I removed the last active class before the click event occurs.
My goal is that when a user clicks on one of the dots in the slider, that dot should become active by receiving the "active" class while the previously active dot should lose this class.
navDots.addEventListener('click', e => {
// Ensure only the dots are clickable
const targetDot = e.target.closest('.dots');
// Disable NavDots if clicked outside
if(!targetDot) return;
// Determine the index of the clicked dot
const dotIndex = Array.from(targetDot.parentNode.children).indexOf(targetDot);
console.log(dotIndex);
// Add the active class to the clicked dot
navDots.children[dotIndex].classList.add('active');
//HOW TO REMOVE PREVIOUS DOT ACTIVE style?
// Show image corresponding to dotIndex
showImages(dotIndex);
});
Thank you for your assistance,
r,y.