¿Qué es un carrusel?

Un carrusel (slider) muestra varias imágenes en el mismo espacio y permite navegar con botones de anterior y siguiente.

Paso 1: Estructura HTML

<div class="carousel-container">
  <div class="carousel-track">
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/3498db/ffffff?text=Imagen+1" alt="Imagen 1" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/2ecc71/ffffff?text=Imagen+2" alt="Imagen 2" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/600x300/e74c3c/ffffff?text=Imagen+3" alt="Imagen 3" />
    </div>
  </div>
  <button class="carousel-btn prev">&#10094;</button>
  <button class="carousel-btn next">&#10095;</button>
</div>

Paso 2: Estilos CSS

.carousel-container { position: relative; overflow: hidden; max-width: 600px; }
.carousel-track { display: flex; transition: transform .4s ease; }
.carousel-slide { min-width: 100%; }
.carousel-slide img { width: 100%; display: block; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); }
.prev { left: 10px; }
.next { right: 10px; }

Paso 3: JavaScript

const track = document.querySelector('.carousel-track');
const slides = document.querySelectorAll('.carousel-slide');
let index = 0;

function update() {
  track.style.transform = 'translateX(' + (-index * 100) + '%)';
}

document.querySelector('.next').addEventListener('click', () => {
  index = (index + 1) % slides.length;
  update();
});

document.querySelector('.prev').addEventListener('click', () => {
  index = (index - 1 + slides.length) % slides.length;
  update();
});

Siguientes pasos

• Indicadores (puntos)
• Autoplay
• Soporte swipe