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