`; }).join(''); slide.innerHTML = ` `; track.appendChild(slide); }); // Carousel Functionality let currentIdx = 0; const nextBtn = document.getElementById('appForward'); const prevBtn = document.getElementById('appBack'); function getItemsVisible() { if (window.innerWidth >= 1024) return 3; if (window.innerWidth >= 768) return 2; return 1; } function updateCarousel() { const slide = track.querySelector('.app-slide'); if (slide) { const cardWidth = slide.offsetWidth; track.style.transform = `translateX(-${currentIdx * cardWidth}px)`; } } function moveNext() { const visible = getItemsVisible(); if (currentIdx < appData.length - visible) { currentIdx++; } else { currentIdx = 0; } updateCarousel(); } function movePrev() { const visible = getItemsVisible(); if (currentIdx > 0) { currentIdx--; } else { currentIdx = Math.max(0, appData.length - visible); } updateCarousel(); } nextBtn.addEventListener('click', () => { moveNext(); resetTimer(); }); prevBtn.addEventListener('click', () => { movePrev(); resetTimer(); }); // Auto-play logic let scrollTimer = setInterval(moveNext, 4500); function resetTimer() { clearInterval(scrollTimer); scrollTimer = setInterval(moveNext, 4500); } track.addEventListener('mouseenter', () => clearInterval(scrollTimer)); track.addEventListener('mouseleave', () => resetTimer()); window.addEventListener('resize', () => { currentIdx = 0; updateCarousel(); }); // Final check for positioning setTimeout(updateCarousel, 200); });