Carousel Cover Page let currentSlide = 0; const slides = document.querySelectorAll('.carousel-slide'); const dots = document.querySelectorAll('.dot'); const totalSlides = slides.length; let autoplayInterval; // Show specific slide function showSlide(index) { // Remove active class from all slides and dots slides.forEach(slide => slide.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); // Wrap around if needed if (index >= totalSlides) { currentSlide = 0; } else if (index { changeSlide(1); }, 5000); // Change slide every 5 seconds } function resetAutoplay() { clearInterval(autoplayInterval); startAutoplay(); } // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') { changeSlide(-1); } else if (e.key === 'ArrowRight') { changeSlide(1); } }); // Touch/swipe support for mobile let touchStartX = 0; let touchEndX = 0; document.querySelector('.carousel-container').addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; }); document.querySelector('.carousel-container').addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { if (touchEndX touchStartX + 50) { changeSlide(-1); // Swipe right } } // Start autoplay when page loads startAutoplay(); // Pause autoplay when user hovers over carousel document.querySelector('.carousel-container').addEventListener('mouseenter', () => { clearInterval(autoplayInterval); }); document.querySelector('.carousel-container').addEventListener('mouseleave', () => { startAutoplay(); });