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()); });