Componentes · Interacción

Carousel (carrusel de contenido)

Recorre un conjunto pequeño de paneles mediante controles, indicadores y navegación por teclado.

v2.0

Controles explícitos

Anterior y siguiente siempre permanecen disponibles.

Indicadores

Comunican cantidad y posición actual.

Teclado

Las flechas izquierda y derecha cambian el slide.

Código + resultado

Ejemplo aplicado de Carousel

El código mostrado corresponde exactamente al componente renderizado en el panel de resultado.

<section class="q-carousel rounded-16 shadow-box-s" data-qy-carousel data-qy-carousel-autoplay="4000" tabindex="0" aria-label="Novedades de Quickly V2">
  <button class="q-carousel__autoplay btn-ico btn-light btn-fs-02 rounded-100 shadow-box-xs" type="button" aria-pressed="false" aria-label="Pausar reproducción automática" title="Pausar reproducción automática" data-qy-carousel-toggle>
    ⏸
  </button>
  <div class="q-carousel__viewport">
    <article class="q-carousel__slide" data-qy-carousel-slide>
      <div class="q-carousel__content">
        <span class="q-badge rounded-p">
          01
        </span>
        <h3>
          Slide 1
        </h3>
        <p>
          Arquitectura clara, modular y consistente.
        </p>
      </div>
    </article>
    <article class="q-carousel__slide" data-qy-carousel-slide hidden>
      <div class="q-carousel__content">
        <span class="q-badge rounded-p q-badge--purple">
          02
        </span>
        <h3>
          Slide 2
        </h3>
        <p>
          Construidos únicamente con QuicklyCSS.
        </p>
      </div>
    </article>
    <article class="q-carousel__slide" data-qy-carousel-slide hidden>
      <div class="q-carousel__content">
        <span class="q-badge rounded-p q-badge--success">
          03
        </span>
        <h3>
          Slide 3
        </h3>
        <p>
          Clases legibles en cada breakpoint.
        </p>
      </div>
    </article>
  </div>
  <button class="q-carousel__control rounded-100 q-carousel__control--prev shadow-box-xs" type="button" aria-label="Anterior" data-qy-carousel-prev>
    ‹
  </button>
  <button class="q-carousel__control rounded-100 q-carousel__control--next shadow-box-xs" type="button" aria-label="Siguiente" data-qy-carousel-next>
    ›
  </button>
  <div class="q-carousel__indicators">
    <button class="q-carousel__indicator rounded-p" type="button" aria-label="Ir al slide 1" aria-current="true" data-qy-carousel-indicator>
    </button>
    <button class="q-carousel__indicator rounded-p" type="button" aria-label="Ir al slide 2" aria-current="false" data-qy-carousel-indicator>
    </button>
    <button class="q-carousel__indicator rounded-p" type="button" aria-label="Ir al slide 3" aria-current="false" data-qy-carousel-indicator>
    </button>
  </div>
</section>

Componente real

Slide 1

Arquitectura clara, modular y consistente.

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

Clases disponibles

La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

Clase o atributo	Función	Uso recomendado
`.q-carousel`	Raíz	Contenedor navegable.
`.shadow-box-s`	Sombra opcional	Eleva el carrusel como superficie independiente.
`.q-carousel__viewport`	Ventana	Recorta la secuencia visible.
`.q-carousel__slide`	Diapositiva	Elemento individual.
`.q-carousel__media`	Medio	Imagen o video de una diapositiva.
`.q-carousel__content`	Contenido	Composición textual de la diapositiva.
`.q-carousel__autoplay`	Control de reproducción	Posiciona el botón para pausar o reanudar el modo automático.
`.btn-ico`	Botón de icono	Mantiene proporciones cuadradas para los símbolos de pausa y reproducción.
`.btn-light`	Variante visual	Aplica el tratamiento claro del sistema de botones.
`.btn-fs-02`	Escala tipográfica	Define el tamaño del símbolo del control.
`.rounded-100`	Forma circular	Redondea completamente el control de reproducción.
`.q-carousel__control`	Control base	Botón de navegación.
`.shadow-box-xs`	Sombra de control	Separa los controles del contenido del slide.
`.q-carousel__control--prev`	Anterior	Retrocede una diapositiva.
`.q-carousel__control--next`	Siguiente	Avanza una diapositiva.
`.q-carousel__indicators`	Indicadores	Agrupa los destinos directos.
`.q-carousel__indicator`	Indicador	Selecciona una diapositiva.
`.q-badge`	Etiqueta auxiliar	Numera o identifica una diapositiva.
`.q-badge--purple`	Etiqueta violeta	Distingue la segunda diapositiva.
`.q-badge--success`	Etiqueta positiva	Distingue la tercera diapositiva.
`data-qy-carousel`	Hook JS	Inicializa el carrusel.
`data-qy-carousel-autoplay="4000"`	Modo automático	Avanza según el intervalo indicado; si se omite, el carrusel es manual.
`data-qy-carousel-toggle`	Control de autoplay	Pausa o reanuda la reproducción automática.
`aria-label / title`	Ayuda accesible	Anuncia la acción a lectores de pantalla y muestra un tooltip nativo.
`data-qy-carousel-slide`	Hook JS	Identifica cada diapositiva.
`data-qy-carousel-prev / next`	Hook JS	Conecta los controles anterior y siguiente.
`data-qy-carousel-indicator`	Hook JS	Conecta cada indicador.
`.bc-{token}`	Color de acento	Personaliza el indicador del slide activo.
`.rounded-16`	Radio del carrusel	Redondea el contenedor mediante una utilidad.
`.rounded-100`	Controles circulares	Redondea completamente los botones anterior, siguiente y pausa.
`.rounded-p`	Indicadores	Mantiene los indicadores con extremos redondeados.

Recomendaciones

Buenas prácticas de Carousel

Pocos slides

Limita el conjunto a contenido realmente relacionado.

Controles visibles

No dependas sólo de gestos o indicadores.

Autoplay controlable

Incluye siempre una acción visible para pausar y reanudar el avance.

Altura estable

Evita saltos de layout entre slides con contenido distinto.