let currentSlide = 0; const slides = document.querySelectorAll('.slide'); const totalSlides = slides.length; const counter = document.getElementById('slide-counter'); const prevBtn = document.getElementById('prev-btn'); const nextBtn = document.getElementById('next-btn'); function updateSlides() { slides.forEach((slide, index) => { // Reset classes slide.classList.remove('active', 'left', 'right'); if (index === currentSlide) { slide.classList.add('active'); } else if (index < currentSlide) { slide.classList.add('left'); } else { slide.classList.add('right'); } }); counter.textContent = `${currentSlide + 1} / ${totalSlides}`; prevBtn.disabled = currentSlide === 0; nextBtn.disabled = currentSlide === totalSlides - 1; } function nextSlide() { if (currentSlide < totalSlides - 1) { currentSlide++; updateSlides(); } } function prevSlide() { if (currentSlide > 0) { currentSlide--; updateSlides(); } } // Keyboard Navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowRight' || e.key === 'Space') { nextSlide(); } else if (e.key === 'ArrowLeft') { prevSlide(); } }); // Initialize updateSlides();