document.addEventListener('DOMContentLoaded', () => { const carousel = document.getElementById('carousel'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const dots = document.querySelector('navigation-dots'); let currentSlide = 0; const totalSlides = 5; // Create slides const slides = [ { bg: 'gradient-bg', content: `
` }, { bg: 'bg-carmed', content: ` ` }, { bg: 'bg-coca', content: ` ` }, { bg: 'bg-gradient-to-br from-carmed to-coca', content: ` ` }, { bg: 'bg-dark', content: ` ` } ]; // Initialize carousel slides.forEach((slide, index) => { const slideElement = document.createElement('div'); slideElement.className = `flex-shrink-0 w-full h-full flex items-center justify-center ${slide.bg} slide-transition`; slideElement.innerHTML = slide.content; carousel.appendChild(slideElement); }); // Update carousel position function updateCarousel() { carousel.style.transform = `translateX(-${currentSlide * 100}%)`; dots.setAttribute('current', currentSlide); feather.replace(); } // Event listeners prevBtn.addEventListener('click', () => { currentSlide = (currentSlide - 1 + totalSlides) % totalSlides; updateCarousel(); }); nextBtn.addEventListener('click', () => { currentSlide = (currentSlide + 1) % totalSlides; updateCarousel(); }); // Keyboard navigation document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') { prevBtn.click(); } else if (e.key === 'ArrowRight') { nextBtn.click(); } }); // Initialize updateCarousel(); });