Carruseles con CSS

Adam Argyle

Publicación: 20 de marzo de 2025

A partir de Chrome 135, puedes usar funciones de la especificación CSS Overflow 5 que se diseñaron para crear experiencias de desplazamiento y carrusel.

En esta publicación, se ofrece una descripción general de muchas experiencias diferentes de desplazamiento y carrusel creadas con estas nuevas funciones y sin JavaScript. Mira el siguiente video y entusiasmate con lo que ahora puedes lograr.

En el video, se muestra una armonía de botones de desplazamiento, marcadores de desplazamiento, animación controlada por desplazamiento, consultas scroll-state(), :has(), cuadrícula, anclaje y mucho más.

Aún más impresionante es la historia de accesibilidad.

El navegador se encarga de las prácticas recomendadas para los carruseles gracias al trabajo en conjunto de los equipos de ingeniería y accesibilidad. Sería muy difícil crear un carrusel más accesible que este.

Presentamos ::scroll-button() y ::scroll-marker()

Un carrusel es un área de desplazamiento con hasta dos indicaciones visuales de la IU agregadas: botones y marcadores.

En la primera versión de las funciones de carrusel de CSS, los botones y los marcadores se crean a partir de CSS. El navegador coloca los elementos como hermanos, con los roles adecuados, en el orden de tabulación correcto y mantiene su estado. Esto facilita el desarrollo de un carrusel accesible.

• Botones de desplazamiento
  Elementos interactivos y con estado que proporciona el navegador para facilitar el acceso al contenido y el desplazamiento del 85% de un área de desplazamiento cuando se presionan.<button>

• Marcadores de desplazamiento
  Elementos de navegación con estado <a> proporcionados por el navegador que ayudan a acceder al contenido de cualquier elemento solicitado en el área de desplazamiento.

En el resto de esta publicación, se muestra cómo crear un carrusel con estas funciones nuevas.

Comienza con un elemento de desplazamiento

Puedes agregar botones y marcadores a cualquier área de desplazamiento de tu sitio.

El siguiente código CSS crea un área de desplazamiento básica para usar en pasos posteriores y agregar botones y marcadores. El ajuste de desplazamiento no es obligatorio para un carrusel, pero se usa en este ejemplo. Los carruseles también funcionan para los desplazadores verticales y bidireccionales.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

Cómo agregar botones de desplazamiento con ::scroll-button()

Según tu sistema operativo, es posible que ya haya botones de desplazamiento alrededor de las barras de desplazamiento. Los botones de barra de desplazamiento integrados tienden a empujar un área de desplazamiento, mientras que los botones de desplazamiento de CSS desplazan el 85% del área de desplazamiento.

En el caso de los carruseles que solo muestran un elemento de ancho completo a la vez con puntos de ajuste de desplazamiento, esto se sentirá como una cantidad de elemento por elemento. En el caso de las listas largas de elementos en las que se ven más de uno a la vez, se desplaza casi una página completa.

Para agregar botones de desplazamiento con CSS, haz lo siguiente:

1. Agrégalos como otros seudoelementos, con un selector: .carousel::scroll-button(right) para un botón de desplazamiento hacia la derecha.
2. Especifica content con un texto alternativo de resguardo accesible opcional.

El navegador creará botones reales, con tu contenido dentro, como elementos secundarios del desplazador. Ahora puedes diseñar estos botones, darles estilo o anchor()los como necesites. El siguiente código CSS crea dos botones, uno para desplazarse hacia la izquierda y otro para desplazarse hacia la derecha.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*):focus-visible {
    outline-offset: 5px;
  }
}

Agrega marcadores de desplazamiento con ::scroll-marker()

Al igual que el elemento de control deslizante de la barra de desplazamiento, los marcadores de desplazamiento de CSS pueden sugerir el tamaño del carrusel y, al mismo tiempo, proporcionar la capacidad de moverse rápidamente al final o al principio. Un marcador de desplazamiento CSS es diferente de la barra de desplazamiento porque cada marcador es un vínculo que puede representar cualquier elemento del desplazador.

Un ejemplo de esta distinción son las temporadas de una serie de TV. En lugar de crear un marcador para cada uno de los 10 episodios, crea 2 marcadores que vayan al comienzo del capítulo.

Ten en cuenta que estos marcadores no son puntos, sino que usan la propiedad content: "Season 1" de su seudoelemento. Los marcadores también pueden ser miniaturas, que se usan comúnmente para los carruseles de galerías en sitios web enfocados en el comercio electrónico o las fotos.

Los marcadores son como los vínculos <a> en la página, pero tienen algunas funciones especiales:

1. Incluyen un estado :target-current para cuando el marcador está a la vista o se ajusta.
2. Se incluye la navegación con teclado, que se comporta como un focusgroup.
3. Se incluye la experiencia del lector de pantalla y se informa como una lista de pestañas.

Sigue estos pasos para agregar marcadores a los puntos de interés significativos de tu barra de desplazamiento:

1. Define la posición de scroll-marker-group como before o after.
2. Selecciona los lugares de interés con un selector .carousel .point-of-interest::scroll-marker.
3. Especifica content con un texto alternativo de resguardo accesible opcional: números, texto, vacío o una imagen.

El navegador crea todos los marcadores y los coloca en el contenedor del grupo de marcadores. En este ejemplo, se crea un marcador vacío para cada <li>, de modo que se cree un punto de marcador para cada elemento.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

El elemento contenedor de los marcadores se llama ::scroll-marker-group y se crea como un elemento secundario del desplazador, al igual que los botones de desplazamiento. Este contenedor puede diseñarse y colocarse donde lo necesites.

Marcadores y botones al mismo tiempo

Si juntas ambos elementos, la experiencia se ve como un carrusel, pero tiene los siguientes beneficios:

• Funciona con JavaScript inhabilitado.
• Sin hidratación ni dimensionamiento diferido (reduce el CLS).
• Está listo para todo tipo de animaciones y activadores de desplazamiento.
• Se incluye la accesibilidad.
• Es compatible con el tacto, el mouse y el teclado.

Menos esfuerzo, más alcance y mayor velocidad.

Recursos

En esta publicación, se hace referencia a estas funciones principalmente como "carrusel", pero sus capacidades y utilidad se extienden mucho más allá de los casos de uso del carrusel. Para obtener una idea completa del potencial de estas nuevas funciones, prueba la Galería giratoria y consulta otros componentes, como scrollspy, pestañas y diapositivas.

• Estándares web
  • CSS Overflow 5
  • Explicación del carrusel
  • Carrusel de Aria de la WAI
• Chrome
  • Intención de enviar
  • Galería de carrusel
  • Configurador de carrusel

Configurador de carrusel

Si eres un estudiante visual e interactivo, prueba el Configurador de carrusel.

Ofrece interruptores, por ejemplo, para los botones de desplazamiento, y, cuando se habilitan, el carrusel que se muestra inmediatamente tiene botones y el CSS asociado que se usa.

También incluye ejemplos de conceptos más avanzados que se encuentran junto al carrusel:

• interactividad
• scroll-state
• animación controlada por desplazamiento
• y columnas de ajuste de desplazamiento

Galería giratoria

Un espacio de demostración para quienes tienen curiosidad por saber hasta dónde pueden llegar estas funciones, que responde preguntas como "¿puede hacer X?". Cada demostración se basa en un caso de uso que se encuentra en Internet. En cada demostración, se muestra cómo coordinar estos botones y marcadores con animaciones controladas por desplazamiento, consultas scroll-state() y mucho más.

Dato curioso: Todo el sitio no usa JavaScript.

Los ejemplos varían desde los más sencillos hasta los más robustos y con muchas funciones. Navegar por la galería debe ser inspirador, tranquilizador y, por supuesto, debe permitir inspeccionar el código para tomarlo. Busca e inspecciona @layer utilities para encontrar utilidades que te ayuden a crear carruseles.

Trabajo adicional

Nos enorgullece la forma en que estas funciones se integran con todo el código HTML y CSS. La accesibilidad de un carrusel de CSS es de primer nivel. El rendimiento de un carrusel de CSS es mejor que el de cualquier solución de JavaScript. La experiencia del usuario de un carrusel de CSS es natural, fluida y completa. Sin embargo, existen formas de mejorar.

Trae tus propios elementos

Ya se está trabajando para que puedas agregar tus propios componentes para los botones y marcadores de desplazamiento. Esto significa que podrías proporcionar tus propias etiquetas <a> que tengan contenido enriquecido, como íconos. También puedes traer tus propios botones multicapa creados con Tailwind.

Desplazamiento cíclico

Muchos carruseles se repiten cuando llegan al final, como un carrusel de una feria. Estamos al tanto de esto y tenemos la intención de proporcionar una solución de plataforma.

Esperamos que disfrutes esta función. Esperamos que todos los usuarios web con JavaScript inhabilitado disfruten de una agradable experiencia de desplazamiento y que se logren todas las reducciones de CLS gracias al mejor ciclo de vida cronometrado de un carrusel integrado.

Menos trabajo para ti, experiencias del usuario excelentes y mejor rendimiento.