I was hoping that when the button is clicked, the scroll would move in the direction of the click while holding down the button. Initially, it worked flawlessly, but suddenly it stopped functioning.
export default function initCarousel() {
const carousel = document.querySelector("[data-carousel='scroll']");
const rightBtn = document.querySelector("[data-carousel='right']");
const leftBtn = document.querySelector("[data-carousel='left']");
let timer;
leftBtn.addEventListener("mousedown", () => {
timer = setInterval(() => {
carousel.scrollLeft -= 50;
}, 20);
});
rightBtn.addEventListener("mousedown", () => {
timer = setInterval(() => {
carousel.scrollLeft += 50;
}, 20);
});
leftBtn.addEventListener("mouseup", () => {
if (timer) clearInterval(timer);
});
rightBtn.addEventListener("mouseup", () => {
if (timer) clearInterval(timer);
});
}