window.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('carousel');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
// Calculates width of 1 card (280px) + gap (20px)
const getStep = () => {
const card = container.querySelector('.card');
return card ? card.offsetWidth + 20 : 300;
};
// Move right
const scrollNext = () => {
const maxScroll = container.scrollWidth - container.clientWidth;
if (Math.ceil(container.scrollLeft) >= maxScroll) {
container.scrollTo({ left: 0, behavior: 'smooth' });
} else {
container.scrollBy({ left: getStep(), behavior: 'smooth' });
}
};
// Move left
const scrollPrev = () => {
if (container.scrollLeft <= 0) {
const maxScroll = container.scrollWidth - container.clientWidth;
container.scrollTo({ left: maxScroll, behavior: 'smooth' });
} else {
container.scrollBy({ left: -getStep(), behavior: 'smooth' });
}
};
// Arrow Event Listeners
nextBtn.addEventListener('click', () => {
scrollNext();
resetAutoScroll();
});
prevBtn.addEventListener('click', () => {
scrollPrev();
resetAutoScroll();
});
// Auto-Scroll Logic
let timer = setInterval(scrollNext, 3500);
const resetAutoScroll = () => {
clearInterval(timer);
timer = setInterval(scrollNext, 3500);
};
// Pause auto-scroll on mouse enter / resume on leave
container.addEventListener('mouseenter', () => clearInterval(timer));
container.addEventListener('mouseleave', () => resetAutoScroll());
});