Estructura básica del carousel

El carousel de Bootstrap es un componente que permite crear presentaciones deslizantes de contenido, ideal para mostrar múltiples elementos de forma rotativa y atractiva. Este componente se basa en una estructura HTML específica que combina contenedores anidados y clases CSS predefinidas para funcionar correctamente.

Componentes fundamentales

La estructura básica de un carousel se construye mediante tres elementos principales que trabajan en conjunto:

1. El contenedor principal (.carousel)

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <!-- Contenido del carousel aquí -->
</div>

El elemento raíz utiliza la clase .carousel y debe incluir un identificador único mediante el atributo id. La clase .slide es opcional pero recomendada, ya que añade una transición suave entre slides. El atributo data-bs-ride="carousel" activa el comportamiento automático de rotación.

2. El contenedor interno (.carousel-inner)

<div class="carousel-inner">
  <!-- Los slides individuales van aquí -->
</div>

El .carousel-inner actúa como el contenedor directo de todos los slides y es responsable del comportamiento de deslizamiento. Este elemento debe estar inmediatamente dentro del contenedor principal.

3. Los slides individuales (.carousel-item)

<div class="carousel-item active">
  <img src="imagen1.jpg" class="d-block w-100" alt="Descripción">
</div>
<div class="carousel-item">
  <img src="imagen2.jpg" class="d-block w-100" alt="Descripción">
</div>

Cada slide utiliza la clase .carousel-item y el primer elemento debe incluir la clase .active para indicar cuál se muestra inicialmente. Sin esta clase, el carousel no funcionará correctamente.

Estructura completa básica

Un carousel mínimo y funcional requiere la siguiente estructura HTML:

<div id="miCarousel" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="slide1.jpg" class="d-block w-100" alt="Primer slide">
    </div>
    <div class="carousel-item">
      <img src="slide2.jpg" class="d-block w-100" alt="Segundo slide">
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="Tercer slide">
    </div>
  </div>
</div>

Comportamiento automático

El atributo data-bs-ride="carousel" configura el carousel para que inicie automáticamente cuando se carga la página. Este comportamiento incluye:

Rotación automática de slides cada 5 segundos por defecto
Transiciones suaves entre elementos cuando se incluye la clase .slide
Pausa automática cuando el usuario pasa el ratón sobre el carousel

Para un carousel que no se inicie automáticamente, simplemente omite el atributo data-bs-ride o utiliza data-bs-ride="false".

Requisitos de contenido

Cada .carousel-item puede contener cualquier tipo de contenido HTML, pero es importante considerar:

Las imágenes deben usar las clases .d-block w-100 para ocupar todo el ancho disponible
El contenido debe tener dimensiones consistentes para evitar saltos visuales entre slides
Solo un elemento puede tener la clase .active simultáneamente

<div class="carousel-item active">
  <div class="bg-primary text-white p-5 text-center">
    <h3>Contenido personalizado</h3>
    <p>Este slide contiene texto en lugar de una imagen</p>
  </div>
</div>

Esta estructura fundamental proporciona la base sólida sobre la cual se pueden agregar controles de navegación, indicadores y personalización avanzada, manteniendo la funcionalidad core del componente intacta.

Controles de navegación e indicadores

Los controles de navegación y los indicadores transforman un carousel básico en una experiencia completamente interactiva, permitiendo al usuario navegar manualmente entre slides y visualizar su posición actual dentro de la secuencia.

Controles de navegación básicos

Los controles de navegación son botones que permiten al usuario moverse hacia adelante y hacia atrás entre slides de forma manual. Bootstrap proporciona dos clases específicas para estos controles:

Botón anterior (.carousel-control-prev)

<button class="carousel-control-prev" type="button" data-bs-target="#miCarousel" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Anterior</span>
</button>

Botón siguiente (.carousel-control-next)

<button class="carousel-control-next" type="button" data-bs-target="#miCarousel" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Siguiente</span>
</button>

Cada control requiere el atributo data-bs-target que debe coincidir con el ID del carousel, y el atributo data-bs-slide que especifica la dirección del movimiento ("prev" para anterior, "next" para siguiente).

Estructura completa con controles

Un carousel con navegación completa integra los controles dentro del contenedor principal:

<div id="carouselConControles" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="producto1.jpg" class="d-block w-100" alt="Producto destacado 1">
    </div>
    <div class="carousel-item">
      <img src="producto2.jpg" class="d-block w-100" alt="Producto destacado 2">
    </div>
    <div class="carousel-item">
      <img src="producto3.jpg" class="d-block w-100" alt="Producto destacado 3">
    </div>
  </div>
  
  <!-- Controles de navegación -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselConControles" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselConControles" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Indicadores numerados

Los indicadores proporcionan una navegación directa a cualquier slide específico y muestran visualmente la posición actual del usuario dentro del carousel. Se implementan mediante una lista con la clase .carousel-indicators:

<div class="carousel-indicators">
  <button type="button" data-bs-target="#miCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#miCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#miCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

Cada indicador utiliza:

data-bs-target: ID del carousel al que pertenece
data-bs-slide-to: Índice del slide (comenzando desde 0)
class="active": Solo en el indicador del primer slide
aria-current="true": Acompañando a la clase active para accesibilidad

Posicionamiento de indicadores

Los indicadores se posicionan automáticamente en la parte inferior del carousel cuando se colocan dentro del contenedor principal:

<div id="carouselCompleto" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicadores -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselCompleto" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Testimonial 1"></button>
    <button type="button" data-bs-target="#carouselCompleto" data-bs-slide-to="1" aria-label="Testimonial 2"></button>
    <button type="button" data-bs-target="#carouselCompleto" data-bs-slide-to="2" aria-label="Testimonial 3"></button>
  </div>
  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="bg-light p-5 text-center">
        <blockquote class="blockquote">
          <p>"Excelente servicio y atención al cliente."</p>
          <footer class="blockquote-footer">María García</footer>
        </blockquote>
      </div>
    </div>
    <div class="carousel-item">
      <div class="bg-light p-5 text-center">
        <blockquote class="blockquote">
          <p>"Productos de alta calidad y entrega rápida."</p>
          <footer class="blockquote-footer">Juan Pérez</footer>
        </blockquote>
      </div>
    </div>
    <div class="carousel-item">
      <div class="bg-light p-5 text-center">
        <blockquote class="blockquote">
          <p>"Recomiendo esta empresa sin dudarlo."</p>
          <footer class="blockquote-footer">Ana Martín</footer>
        </blockquote>
      </div>
    </div>
  </div>
  
  <!-- Controles -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselCompleto" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Anterior</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselCompleto" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Siguiente</span>
  </button>
</div>

Consideraciones de accesibilidad

Los controles e indicadores incluyen elementos específicos para accesibilidad:

.visually-hidden: Proporciona descripción textual para lectores de pantalla
aria-hidden="true": Oculta iconos decorativos de tecnologías asistivas
aria-label: Describe la función de cada indicador
aria-current="true": Identifica el slide activo actual

Comportamiento interactivo

Una vez implementados, estos elementos proporcionan múltiples formas de navegación:

Navegación secuencial: Usando los botones anterior/siguiente
Navegación directa: Haciendo clic en cualquier indicador específico
Navegación automática: El carousel continúa rotando automáticamente
Pausa inteligente: Se detiene cuando el usuario interactúa manualmente

Los controles y indicadores mantienen la sincronización automáticamente, actualizando el estado visual sin requerir configuración adicional. El indicador correspondiente al slide actual siempre mostrará la clase .active, mientras que los controles permiten navegación fluida en ambas direcciones, incluyendo el comportamiento circular (del último slide al primero y viceversa).

Contenido de slides y personalización

El contenido interno de cada slide representa la flexibilidad real del componente carousel, permitiendo integrar diversos tipos de elementos y aplicar personalización visual mediante las utilidades de Bootstrap que ya dominas.

Tipos de contenido en slides

Los slides pueden alojar múltiples tipos de contenido más allá de las imágenes simples, adaptándose a diferentes necesidades comunicativas:

Slides con cards integradas

<div class="carousel-item active">
  <div class="container-fluid bg-light py-5">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card shadow">
          <img src="proyecto1.jpg" class="card-img-top" alt="Proyecto destacado">
          <div class="card-body">
            <h5 class="card-title">Desarrollo Web Moderno</h5>
            <p class="card-text">Creación de aplicaciones web responsivas usando las últimas tecnologías del mercado.</p>
            <a href="#" class="btn btn-primary">Ver detalles</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Slides con contenido textual centrado

<div class="carousel-item">
  <div class="bg-primary text-white d-flex align-items-center justify-content-center" style="min-height: 400px;">
    <div class="text-center px-4">
      <h2 class="display-4 fw-bold mb-3">Innovación Digital</h2>
      <p class="lead mb-4">Transformamos ideas en soluciones tecnológicas que impulsan tu negocio hacia el futuro.</p>
      <button class="btn btn-light btn-lg">Descubre más</button>
    </div>
  </div>
</div>

Slides con múltiples elementos combinados

<div class="carousel-item">
  <div class="row g-0">
    <div class="col-md-6">
      <img src="banner-producto.jpg" class="img-fluid h-100 object-fit-cover" alt="Producto estrella">
    </div>
    <div class="col-md-6 bg-dark text-white d-flex align-items-center">
      <div class="p-5">
        <h3 class="h2 mb-3">Nueva Colección</h3>
        <p class="mb-4">Descubre nuestros últimos diseños creados especialmente para esta temporada.</p>
        <div class="d-flex gap-2">
          <span class="badge bg-warning">Novedad</span>
          <span class="badge bg-success">Descuento 20%</span>
        </div>
      </div>
    </div>
  </div>
</div>

Captions para descripciones

Los captions proporcionan una capa adicional de información superpuesta sobre el contenido del slide, utilizando la clase .carousel-caption:

Caption básico con texto

<div class="carousel-item active">
  <img src="banner-empresa.jpg" class="d-block w-100" alt="Oficinas centrales">
  <div class="carousel-caption d-none d-md-block">
    <h5>Nuestras Instalaciones</h5>
    <p>Espacios diseñados para fomentar la creatividad y la colaboración entre equipos.</p>
  </div>
</div>

Caption con elementos interactivos

<div class="carousel-item">
  <img src="evento-conferencia.jpg" class="d-block w-100" alt="Conferencia anual">
  <div class="carousel-caption d-none d-md-block">
    <h5 class="text-warning fw-bold">Conferencia 2024</h5>
    <p>Únete a los mejores profesionales del sector en nuestro evento anual.</p>
    <button class="btn btn-outline-light btn-sm">Reservar plaza</button>
  </div>
</div>

Caption con fondo personalizado

<div class="carousel-item">
  <img src="galeria-arte.jpg" class="d-block w-100" alt="Exposición artística">
  <div class="carousel-caption d-none d-md-block">
    <div class="bg-dark bg-opacity-75 p-3 rounded">
      <h5 class="text-light">Exposición Temporal</h5>
      <p class="text-light mb-2">Arte contemporáneo de artistas locales emergentes.</p>
      <small class="text-warning">Hasta el 30 de diciembre</small>
    </div>
  </div>
</div>

Personalización visual con utilidades

La personalización del carousel se logra combinando las utilidades de Bootstrap con el contenido específico de cada slide:

Personalización de altura y proporciones

<div class="carousel-item active">
  <div class="bg-gradient bg-success d-flex align-items-center justify-content-center text-white" style="min-height: 500px;">
    <div class="text-center">
      <h3 class="display-5 mb-3">Compromiso Ambiental</h3>
      <p class="lead">Productos 100% sostenibles para un futuro mejor</p>
    </div>
  </div>
</div>

Aplicación de filtros y efectos

<div class="carousel-item">
  <div class="position-relative">
    <img src="paisaje-natural.jpg" class="d-block w-100 opacity-75" alt="Naturaleza">
    <div class="position-absolute top-50 start-50 translate-middle text-center text-white">
      <h4 class="display-6 fw-bold text-shadow">Conecta con la Naturaleza</h4>
      <p class="lead">Experiencias únicas en entornos naturales privilegiados</p>
    </div>
  </div>
</div>

Ejemplos prácticos integrados

Carousel para testimonios de clientes

<div id="carouselTestimonios" class="carousel slide bg-light" data-bs-ride="carousel">
  <div class="carousel-inner p-5">
    <div class="carousel-item active">
      <div class="text-center">
        <img src="cliente1.jpg" class="rounded-circle mb-3" width="80" height="80" alt="Cliente satisfecho">
        <blockquote class="blockquote">
          <p class="mb-3">"El servicio superó todas mis expectativas. Altamente recomendable."</p>
          <footer class="blockquote-footer">
            <strong>Elena Rodríguez</strong> <cite title="Source Title">Directora de Marketing</cite>
          </footer>
        </blockquote>
        <div class="text-warning">
          <i class="bi bi-star-fill"></i>
          <i class="bi bi-star-fill"></i>
          <i class="bi bi-star-fill"></i>
          <i class="bi bi-star-fill"></i>
          <i class="bi bi-star-fill"></i>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="text-center">
        <img src="cliente2.jpg" class="rounded-circle mb-3" width="80" height="80" alt="Cliente satisfecho">
        <blockquote class="blockquote">
          <p class="mb-3">"Profesionalidad y calidad en cada detalle. Volveré sin duda."</p>
          <footer class="blockquote-footer">
            <strong>Carlos Mendoza</strong> <cite title="Source Title">CEO StartupTech</cite>
          </footer>
        </blockquote>
        <div class="text-warning">
          <i class="bi bi-star-fill"></i>
          <i class="bi bi-star-fill"></i>
          <i class="bi bi-star-fill"></i>
          <i class="bi bi-star-fill"></i>
          <i class="bi bi-star-fill"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Carousel para showcase de proyectos

<div id="carouselProyectos" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="row g-0 bg-dark text-white">
        <div class="col-md-7">
          <img src="proyecto-web.jpg" class="img-fluid" alt="Desarrollo web">
        </div>
        <div class="col-md-5 d-flex align-items-center">
          <div class="p-4">
            <span class="badge bg-primary mb-2">Web Development</span>
            <h4 class="mb-3">Plataforma E-commerce</h4>
            <p class="mb-3">Sistema completo de comercio electrónico con panel de administración integrado.</p>
            <ul class="list-unstyled">
              <li><i class="bi bi-check-circle text-success me-2"></i>Responsive Design</li>
              <li><i class="bi bi-check-circle text-success me-2"></i>Panel Admin</li>
              <li><i class="bi bi-check-circle text-success me-2"></i>Pagos Online</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row g-0 bg-primary text-white">
        <div class="col-md-7">
          <img src="proyecto-app.jpg" class="img-fluid" alt="Aplicación móvil">
        </div>
        <div class="col-md-5 d-flex align-items-center">
          <div class="p-4">
            <span class="badge bg-warning mb-2">Mobile App</span>
            <h4 class="mb-3">App de Gestión</h4>
            <p class="mb-3">Aplicación móvil para gestión empresarial con sincronización en tiempo real.</p>
            <ul class="list-unstyled">
              <li><i class="bi bi-check-circle text-warning me-2"></i>iOS & Android</li>
              <li><i class="bi bi-check-circle text-warning me-2"></i>Offline Mode</li>
              <li><i class="bi bi-check-circle text-warning me-2"></i>Cloud Sync</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Consideraciones de contenido

Al crear contenido personalizado para slides, es fundamental mantener la consistencia y optimizar la experiencia visual:

Dimensiones uniformes: Todos los slides deben mantener alturas similares para evitar saltos visuales
Legibilidad: Asegurar suficiente contraste entre texto y fondo, especialmente en captions
Responsive behavior: Utilizar .d-none d-md-block en captions complejos para ocultarlos en dispositivos móviles
Carga de contenido: Priorizar imágenes optimizadas y contenido que no comprometa el rendimiento

La flexibilidad del sistema permite combinar cualquier componente de Bootstrap dentro de los slides, desde formularios simples hasta layouts complejos con grid system, manteniendo siempre la funcionalidad core del carousel y la coherencia visual de la interfaz.

Fuentes y referencias

Documentación oficial y recursos externos para profundizar en Bootstrap

Documentación oficial de Bootstrap

Alan Sastre

Ingeniero de Software y formador, CEO en CertiDevs

Ingeniero de software especializado en Full Stack y en Inteligencia Artificial. Como CEO de CertiDevs, Bootstrap es una de sus áreas de expertise. Con más de 15 años programando, 6K seguidores en LinkedIn y experiencia como formador, Alan se dedica a crear contenido educativo de calidad para desarrolladores de todos los niveles.

Más tutoriales de Bootstrap

Explora más contenido relacionado con Bootstrap y continúa aprendiendo con nuestros tutoriales gratuitos.

Ver más tutoriales de Bootstrap Explorar todas las tecnologías

Aprendizajes de esta lección

Comprender la estructura básica y los elementos fundamentales de un carousel en Bootstrap.
Implementar controles de navegación e indicadores para mejorar la interactividad.
Personalizar el contenido de los slides con diferentes tipos de elementos y estilos.
Aplicar consideraciones de accesibilidad y buenas prácticas en el diseño del carousel.
Integrar ejemplos prácticos para testimonios, proyectos y contenido multimedia variado.