/* Contenedor */ .slider-container { position: relative; width: 100%; max-width: 1200px; margin: auto; overflow: hidden; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); } /* Slides */ .slider { display: flex; transition: transform 0.8s ease-in-out; } .slide { min-width: 100%; position: relative; display: none; } .slide.active { display: block; } .slide img { width: 100%; height: auto; border-radius: 14px; display: block; } /* Flechas */ .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); color: white; border: none; padding: 14px; cursor: pointer; border-radius: 50%; font-size: 28px; transition: background 0.3s; z-index: 10; } .prev:hover, .next:hover { background: rgba(255,255,255,0.5); } .prev { left: 20px; } .next { right: 20px; } /* Dots */ .dots { text-align: center; position: absolute; bottom: 15px; width: 100%; } .dot { height: 12px; width: 12px; margin: 0 6px; background-color: rgba(32,32,47,0.6); border-radius: 50%; display: inline-block; cursor: pointer; transition: background 0.3s; } .dot.active { background-color: #fff; } .dot:hover { background-color: #ddd; } /* — Responsivo — */ @media (max-width: 1024px) { .slider-container { max-width: 100%; } } @media (max-width: 768px) { .prev, .next { padding: 10px; font-size: 22px; } .dot { height: 10px; width: 10px; } } @media (max-width: 480px) { .prev, .next { padding: 8px; font-size: 18px; } .dot { height: 8px; width: 8px; margin: 0 4px; } } let index = 0; const slides = document.querySelectorAll(‘.slide’); const prevBtn = document.querySelector(‘.prev’); const nextBtn = document.querySelector(‘.next’); const dots = document.querySelectorAll(‘.dot’); // Función para mostrar un slide function showSlide(n) { slides.forEach((slide, i) => { slide.classList.remove(«active»); dots[i].classList.remove(«active»); if (i === n) { slide.classList.add(«active»); dots[i].classList.add(«active»); } }); index = n; } // Botón siguiente nextBtn.addEventListener(«click», () => { index = (index + 1) % slides.length; showSlide(index); }); // Botón anterior prevBtn.addEventListener(«click», () => { index = (index – 1 + slides.length) % slides.length; showSlide(index); }); // Dots clickeables dots.forEach(dot => { dot.addEventListener(«click», () => { const slideIndex = parseInt(dot.getAttribute(«data-slide»)); showSlide(slideIndex); }); }); // Auto play cada 6s setInterval(() => { index = (index + 1) % slides.length; showSlide(index); }, 6000); showSlide(index);