Plantas que Transforman Espacios

/* Reset total para asegurar que no haya márgenes blancos */ html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; } .carousel-item { display: none; animation: fade 0.8s ease-in-out; } .carousel-item.active { display: block; } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } .dot.active { background-color: #3b82f6; width: 24px; } let currentSlide = 0; const slides = document.querySelectorAll('.carousel-item'); const dots = document.querySelectorAll('.dot'); const totalSlides = slides.length; let slideInterval; function showSlide(index) { if (index >= totalSlides) currentSlide = 0; else if (index { slide.classList.remove('active'); dots[i].classList.remove('active'); }); slides[currentSlide].classList.add('active'); dots[currentSlide].classList.add('active'); } function changeSlide(direction) { showSlide(currentSlide + direction); resetTimer(); } function setSlide(index) { showSlide(index); resetTimer(); } function startTimer() { slideInterval = setInterval(() => { showSlide(currentSlide + 1); }, 5000); } function resetTimer() { clearInterval(slideInterval); startTimer(); } const container = document.getElementById('carousel-container'); container.addEventListener('mouseenter', () => clearInterval(slideInterval)); container.addEventListener('mouseleave', () => startTimer()); window.onload = startTimer;