Componentes

Carrusel

Componente de presentación deslizante. Siempre incluir controles de pausa, soporte de teclado y respetar prefers-reduced-motion.

Carrusel básico con captions

El más común — imágenes con título y descripción. Incluye botón de pausa obligatorio por WCAG.

Vista arquitectónica de un campus universitario

Sede Principal — Meléndez

Ciudad Universitaria, Cali. El corazón académico de la región.

Biblioteca Mario Carvajal

Más de 300.000 títulos al servicio de la comunidad académica.

Campus Sustentable

Más de 40 hectáreas de espacio verde en el corazón de Cali.

HTML — Carrusel con captions

<div class="carousel"
     data-carousel
     data-interval="5000"
     aria-roledescription="carrusel"
     tabindex="0">

  <div class="carousel-track">

    <div class="carousel-slide"
         role="group"
         aria-label="Diapositiva 1 de 3">
      <img src="foto.jpg"
           alt="Descripción significativa"
           loading="lazy">
      <div class="carousel-caption">
        <h3>Título</h3>
        <p>Descripción.</p>
      </div>
    </div>

    <!-- más .carousel-slide -->

  </div>

  <!-- Flechas -->
  <button class="carousel-btn carousel-prev"
          aria-label="Anterior">...</button>
  <button class="carousel-btn carousel-next"
          aria-label="Siguiente">...</button>

  <!-- Pausa — obligatorio WCAG -->
  <button class="carousel-pause"
          aria-label="Pausar carrusel">
    Pausar
  </button>

  <!-- Indicadores -->
  <div class="carousel-indicators">
    <button class="carousel-dot active"
            aria-label="Diapositiva 1"></button>
    <button class="carousel-dot"
            aria-label="Diapositiva 2"></button>
  </div>

</div>

Carrusel de solo imágenes

Sin caption. Ideal para galerías fotográficas o banners visuales.

HTML — Carrusel de solo imágenes

<div class="carousel"
     data-carousel
     data-interval="3500"
     aria-roledescription="carrusel"
     tabindex="0">

  <div class="carousel-track">

    <div class="carousel-slide carousel-slide-sm"
         role="group"
         aria-label="Imagen 1 de 4">
      <img src="foto1.jpg"
           alt="Descripción de la imagen"
           loading="lazy">
    </div>

    <!-- más .carousel-slide.carousel-slide-sm -->

  </div>

  <!-- Flechas -->
  <button class="carousel-btn carousel-prev"
          aria-label="Anterior">...</button>
  <button class="carousel-btn carousel-next"
          aria-label="Siguiente">...</button>

  <!-- Pausa -->
  <button class="carousel-pause"
          aria-label="Pausar carrusel">
    Pausar
  </button>

  <!-- Indicadores -->
  <div class="carousel-indicators">
    <button class="carousel-dot active"
            aria-label="Imagen 1"></button>
    <button class="carousel-dot"
            aria-label="Imagen 2"></button>
    <!-- un .carousel-dot por cada imagen -->
  </div>

</div>

<!-- Nota: carousel-slide-sm → altura 240px -->
<!--       carousel-slide    → altura 380px -->

Carrusel de tarjetas

Muestra 3 cards simultáneamente, desplazando de a una. Ideal para programas académicos o noticias.

Ingeniería de Sistemas

Pregrado · Facultad de Ingeniería

Medicina

Pregrado · Facultad de Salud

Arquitectura

Pregrado · Facultad de Artes

Química

Pregrado · Facultad de Ciencias

Psicología

Pregrado · Facultad de Humanidades

HTML — Carrusel de tarjetas

<div data-carousel-cards>
  <div class="carousel-cards-wrap">
    <div class="carousel-cards-track">

      <div class="card">
        <img class="card-img" src="foto.jpg"
             alt="Descripción">
        <div class="card-body">
          <div class="card-title">Título</div>
          <p class="card-text">Descripción.</p>
        </div>
      </div>
      <!-- más .card -->

    </div>
  </div>
  <div class="carousel-cards-controls">
    <button class="btn btn-outline-marca carousel-prev">← Anterior</button>
    <button class="btn btn-outline-marca carousel-next">Siguiente →</button>
  </div>
</div>

Notas de accesibilidad

Pausa obligatoria — WCAG 2.2 criterio 2.2.2 exige que cualquier contenido en movimiento pueda pausarse.
Movimiento reducido — el carrusel detecta prefers-reduced-motion y desactiva el autoplay automáticamente.
Teclado — flechas ← → navegan entre diapositivas cuando el carrusel tiene el foco.
Alt text — cada imagen debe tener alt descriptivo. Imágenes decorativas: alt="".
aria-roledescription — anuncia a lectores de pantalla que el componente es un carrusel.