Carruseles CSS sin JavaScript: Guía completa

Inicio » Python » Carruseles CSS sin JavaScript: Guía completa

Crear carruseles sin escribir una sola línea de JavaScript ya no es ciencia ficción.; CSS moderno te brinda todo lo que necesitas para crear controles deslizantes suaves y fáciles de usar en dispositivos táctiles utilizando el Propiedad táctil CSS que se sienten como nativos en el navegador. Desde el ajuste automático al desplazamiento hasta pseudoelementos experimentales que generan automáticamente controles de navegación, puedes ofrecer componentes con todas las funciones manteniendo tu paquete ligero y tu vida más sencilla.

Si alguna vez has tenido problemas con bibliotecas de carruseles JS pesadas, problemas de hidratación o peculiaridades de accesibilidad, los carruseles solo con CSS son un soplo de aire fresco.Con las últimas especificaciones (como CSS Overflow Level 5) y características bien establecidas como scroll-snap-typeAhora es posible lanzar carruseles listos para producción que sean rápidos, accesibles mediante teclado y resistentes incluso cuando JavaScript está deshabilitado.

Por qué el CSS moderno hace que los carruseles de JavaScript sean opcionales

Durante años, la respuesta por defecto a "¿cómo creo un carrusel?" era "usa una biblioteca de JS".Swiper, Slick, Glide, el carrusel de Bootstrap y muchos otros resolvieron el problema manejando detectores de eventos, temporizadores, observadores de redimensionamiento y roles ARIA por ti, pero también agregaron kilobytes adicionales a tu paquete e introdujeron otra dependencia que mantener.

Hoy en día, CSS se ha puesto al día discretamente con la mayoría de los casos de uso comunes de carruseles.Con unas pocas propiedades, puedes convertir un desplazamiento horizontal normal en una experiencia paginada con ajuste automático al deslizamiento, compatible con la rueda del ratón, el panel táctil, las flechas del teclado y los gestos táctiles. Sin detectores de eventos, sin redibujados causados ​​por la lógica de JavaScript y sin condiciones de carrera con la hidratación en los frameworks.

La idea básica es simple: tratas tu carrusel como una región desplazable.No se trata de un componente mágico que se teletransporta entre diapositivas. CSS "ayuda" al desplazamiento con puntos de anclaje, transiciones suaves y, en la especificación más reciente, botones y marcadores integrados que el navegador inserta en el DOM como elementos interactivos reales.

Este cambio tiene grandes consecuencias para el rendimiento y la resiliencia.Un carrusel CSS sigue funcionando perfectamente incluso cuando JavaScript está bloqueado, no se carga o el usuario lo desactiva. El motor de desplazamiento del propio navegador se encarga de la mayor parte del trabajo, el cual está altamente optimizado en todos los motores principales y ajustado para dispositivos de baja potencia y herramientas de accesibilidad.

Además de eso, las características de CSS como :has()El diseño de cuadrícula y las animaciones controladas por desplazamiento se conectan a la misma área de desplazamiento., lo que te permite crear sofisticados indicadores de diapositivas, revelaciones de contenido o efectos parallax sin fusionar tres sistemas diferentes (tu código, la lógica de la biblioteca y el desplazamiento del navegador) de forma frágil.

Componente básico: Ajuste de desplazamiento para carruseles solo con CSS.

En el corazón de un carrusel que solo utiliza CSS se encuentra el módulo Scroll Snap.que permite definir puntos “magnéticos” en los que se fijará la posición de desplazamiento una vez que el usuario deje de desplazarse. En lugar de quedar a medio camino entre dos diapositivas, la vista se ajusta a la más cercana, ofreciendo esa sensación clásica de un carrusel.

La estructura HTML puede ser mínima.: un contenedor que se desplaza horizontalmente, además de una serie de elementos deslizantes en su interior. Ni siquiera necesitas darle a cada imagen o tarjeta su propia clase si tu marcado es consistente; aunque nombrar tus elementos suele ser útil para el estilo y la accesibilidad:

Estructura de ejemplo para un carrusel de imágenes básico podría conceptualizarse como un envoltorio como <ul class="carousel"> con multiples <li> elementos, cada uno con una imagen o tarjeta. La magia reside en el CSS:

Se define el contenedor como un diseño flexible horizontal con desplazamiento habilitado. y especificar que debe ajustarse al eje x:

.carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }

Cada diapositiva individual expone entonces una posición de ajuste., generalmente en el centro o al inicio de la ventana gráfica, y establece una base fija para que aparezcan uno o varios por vista:

.carousel-item { flex: 0 0 100%; scroll-snap-align: center; }

Este patrón ya te ofrece un carrusel sorprendentemente completo.Los usuarios pueden deslizar el dedo en dispositivos móviles, desplazarse con el ratón o el panel táctil, y la vista siempre se ajustará a la diapositiva más cercana. No se requiere JavaScript para detectar eventos de desplazamiento ni ajustar manualmente las posiciones.

Para crear carruseles de varios elementos (como tiras de productos), solo necesita ajustar la base flexible.Por ejemplo, podrías mostrar tres elementos por vista con un poco de espacio usando algo como flex: 0 0 calc(33.333% - 1rem) más márgenes laterales. A Scroll Snap no le importa si cada “página” es una diapositiva de ancho completo o un grupo de tarjetas más pequeñas.

Propiedades como object-fit: cover son útiles cuando se trabaja con imágenes sin procesar, asegurando que ocupen todo el espacio de la diapositiva sin distorsionarse. Combinado con una relación de aspecto fija, se obtienen carruseles de imágenes que mantienen una apariencia visual uniforme en cualquier tamaño de pantalla.

Desde simples carruseles hasta carruseles con apariencia nativa.

Un simple carrusel con mecanismo de desplazamiento ya se siente bien, pero las especificaciones modernas lo llevan más allá.especialmente en Chrome 135+, donde el borrador de CSS Overflow Nivel 5 comienza a manifestarse como características reales. La especificación trata un carrusel como un área de desplazamiento con una interfaz de usuario opcional generada por el navegador a su alrededor.

En ese modelo, un “carrusel” equivale a: un elemento desplazable más hasta dos conjuntos de posibilidades de interacción.—botones de desplazamiento y marcadores de desplazamiento. Ambos se crean mediante pseudoelementos CSS, pero el navegador emite elementos DOM reales junto al control de desplazamiento, por lo que se comportan como controles nativos.

Fundamentalmente, el navegador se encarga de la semántica, el orden de enfoque y la gestión del estado.Los elementos inyectados tienen roles adecuados, se pueden navegar mediante la tecla Tab en un orden lógico y reflejan la posición de desplazamiento actual. Esto significa que replicar el mismo nivel de accesibilidad con una biblioteca JS desarrollada manualmente no es tarea fácil; se necesitarían atributos ARIA, comportamiento de grupos de enfoque, navegación mediante teclado y anuncios de región en tiempo real, todo funcionando en conjunto.

Aunque aún no estés listo para confiar en las partes experimentales, esta dirección es importante.Esto indica que los carruseles, las pestañas, los componentes scrollspy y patrones de interfaz de usuario similares están pasando a ser considerados elementos de primera clase en CSS, lo que reducirá progresivamente la necesidad de código JavaScript personalizado.

El resultado final es una base más sólida para todos los usuarios.—incluyendo a personas que desactivan JavaScript, dependen de tecnologías de asistencia, tienen dispositivos de baja potencia o navegan en condiciones de red inestables. El desplazamiento nativo combinado con estilos CSS supera a los widgets con muchos scripts en todos esos casos.

Agregar botones de desplazamiento con ::scroll-button()

En algunas plataformas ya se ven pequeñas flechas junto a las barras de desplazamiento., Pero el nuevo ::scroll-button() El pseudo-elemento va un paso más allá y permite que CSS defina botones específicos de "anterior/siguiente" para cualquier área desplazable, incluidos los carruseles.

Estos botones de desplazamiento definidos por CSS se comportan de manera diferente a las flechas de la barra de desplazamiento tradicionales.En lugar de desplazar el contenido en pequeños incrementos, saltan aproximadamente el 85 % del área visible con cada clic. En un carrusel de ancho completo con alineación automática, esto se siente casi exactamente como un botón de navegación por diapositiva.

Si realmente necesita un movimiento exacto de un solo elemento, puede combinar las opciones de ajuste de desplazamiento.Una receta típica es scroll-snap-type: x mandatory en el contenedor y scroll-snap-stop: always en cada niño de ajuste. De esa forma, con solo pulsar el botón de desplazamiento, pasas de una tarjeta a la siguiente.

Desde el punto de vista de la sintaxis, agregar botones de desplazamiento se parece mucho a dar estilo a otros pseudoelementos.. Usted elige el elemento desplazable (por ejemplo, .carousel) y objetivo ::scroll-button(left) or ::scroll-button(right) para representar los controles de retroceso y avance. Un ejemplo mínimo:

.carousel::scroll-button(left) { content: "⬅" / "Scroll left"; }

.carousel::scroll-button(right) { content: "⮕" / "Scroll right"; }

El valor de contenido separado por barras diagonales le permite proporcionar una etiqueta tanto visual como accesible.El navegador luego crea una imagen real. <button> Los nodos se consideran elementos hermanos del área de desplazamiento y el contenido se coloca dentro de ellos. Puedes posicionarlos y darles estilo como desees, al igual que cualquier otro elemento, utilizando posicionamiento absoluto, cuadrícula CSS o incluso anclajes.

El estilismo enfocado sigue siendo importante aquí.. Por ejemplo, aplicar una regla como .carousel::scroll-button(*):focus-visible { outline-offset: 5px; } Garantiza que, cuando los usuarios pulsen la tecla Tab para acceder a estos botones, vean un anillo de enfoque claro, separado del borde del elemento, lo que preserva la usabilidad del teclado y el cumplimiento de las directrices WCAG.

Internamente, el navegador realiza un seguimiento del estado de los botones y del rango de desplazamiento disponible.Esto significa que no tienes que preocuparte por desactivar el botón "anterior" cuando estés en la primera diapositiva o el botón "siguiente" al final; la plataforma puede gestionar esas condiciones de forma estandarizada.

Marcadores de desplazamiento con ::scroll-marker() para navegación con viñetas o etiquetas.

Los marcadores visuales —puntos o miniaturas debajo del carrusel— son casi una expectativa para los usuarios actuales.. El nuevo ::scroll-marker() El pseudo-elemento permite generar esos indicadores exclusivamente con CSS, cada uno vinculado a un elemento específico de la lista desplazable.

A diferencia del control deslizante de la barra de desplazamiento, los marcadores de desplazamiento representan puntos de interés semántico.Cada marcador no solo corresponde a una posición en píxeles, sino a un elemento hijo real, lo que lo hace ideal para escenarios como temporadas en una serie de televisión, categorías de productos o capítulos lógicos en una historia, en lugar de cada fotograma individual.

Los marcadores aparecen como válidos. <a> elementosTe ofrece dos funciones importantes de forma gratuita: navegación dentro de la página y semántica correcta para lectores de pantalla. Funcionan de forma muy similar a los enlaces de anclaje, pero con algunas mejoras adaptadas al uso en carrusel.

Entre esas mejoras se encuentra la :target-current pseudoclase, que coincide con el momento en que el elemento correspondiente se ajusta a la vista o se considera la diapositiva activa. Puede usarlo para resaltar el marcador activo con un fondo o borde diferente.

Para conectar esto, primero debes definir dónde debe ubicarse el grupo de marcadores. mediante el scroll-marker-group propiedad en el contenedor, normalmente antes o después del desplazamiento. Por ejemplo, scroll-marker-group: after; Los marcadores se colocarían después de la región del carrusel en el DOM.

Luego, seleccionas a los niños individuales que deberían generar marcadores.. Si sus diapositivas son <li> elementos, algo así como .carousel > li::scroll-marker Lo haré. Un patrón común es crear puntos vacíos:

.carousel { scroll-marker-group: after; }

.carousel > li::scroll-marker { content: " "; }

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

El navegador se encarga de generar el <a> marcadores, agrupándolos en un contenedor ::scroll-marker-group dedicadoy exponiéndolos como elementos navegables mediante teclado que se comportan como un grupo de enfoque. Los lectores de pantalla pueden presentarlos de forma similar a una lista de pestañas: se mueve el foco entre los marcadores y se activan para saltar a una diapositiva específica.

Los marcadores no se limitan a los puntos.. Puedes configurar content a números ("1", "2", etc.), etiquetas legibles para humanos como "Temporada 1" o "Capítulo 3", o incluso imágenes en línea para crear galerías de miniaturas para diseños con muchas fotos, como las galerías de productos de comercio electrónico.

Combinando botones, marcadores y estrategias de reserva

Cuando se combinan botones de desplazamiento y marcadores sobre un carrusel con ajuste de desplazamiento, se obtiene un componente que resulta indistinguible de una solución JS.pero es más fácil de mantener y requiere menos piezas móviles. Los usuarios pueden hacer clic en las flechas, pulsar los puntos, deslizar el dedo en las pantallas táctiles o usar la navegación por teclado, todo con un comportamiento consistente.

Esta combinación también soluciona problemas comunes de rendimiento y experiencia de usuario.Como ningún script coordina los cambios de diapositivas, no se produce la alteración del diseño por cambios manuales. scrollLeft Ajustes o temporizadores que se activan en momentos inoportunos. El CLS (Cumulative Layout Shift) se reduce ya que el árbol DOM está listo desde el principio y no se inyectan ni miden elementos al final del ciclo de vida.

Sin embargo, hay un inconveniente: ::scroll-button y ::scroll-marker aún son experimentales. Actualmente, solo se implementan en Chrome 135+ mediante opciones experimentales. Esto significa que es imprescindible diseñar soluciones alternativas adecuadas si se planea utilizarlas en sitios web de producción.

Detección de características mediante @supports es tu mejor aliado aquí. Puede mostrar una barra de navegación tradicional: enlaces a #slide1, #slide2 y así sucesivamente; por defecto, se oculta cuando los controles nativos están disponibles. Un patrón conceptual aproximado sería el siguiente:

.carousel-nav { display: flex; gap: 0.5rem; }

@supports (scroll-button-inline: both) { .carousel-nav { display: none; } }

En HTML, una navegación simple con enlaces de anclaje es suficiente.: cada diapositiva recibe una idy los puntos de navegación apuntan a esos ID. Saltar a un ancla dentro de un contenedor scroll-snap se integra perfectamente con el comportamiento de ajuste, por lo que el deslizamiento se ajusta correctamente después del salto.

Esto significa que puedes disfrutar de las ventajas de los pseudoelementos experimentales en los navegadores compatibles.—botones, marcadores y ganchos de estado de desplazamiento nativos completos— sin dejar de ofrecer una experiencia totalmente funcional en otros aspectos. Ningún usuario se queda atascado con un control deslizante inutilizable.

Además, todo esto sigue funcionando incluso cuando JavaScript está deshabilitado.Porque dependes exclusivamente de los enlaces HTML, el comportamiento de desplazamiento CSS y el motor de desplazamiento del navegador. Para muchos patrones de UX (galerías, líneas de tiempo, demostraciones paso a paso), eso es más que suficiente.

Carruseles de reproducción automática solo con CSS y animaciones por fotogramas clave

Una característica común que la gente espera de los carruseles es la reproducción automática.—Las diapositivas avanzan automáticamente después de unos segundos. Si bien esto suele implementarse con temporizadores de JavaScript, también se puede lograr un comportamiento similar utilizando animaciones CSS puras.

El truco consiste en animar la transformación de una fila flexible que contiene todas las diapositivas.Para un número fijo de diapositivas, se define una línea de tiempo de fotogramas clave donde la pista permanece en cada posición de diapositiva durante un tiempo y luego salta a la siguiente. Algo así como:

@keyframes slide { 0%, 20% { transform: translateX(0); } 25%, 45% { transform: translateX(-100%); } 50%, 70% { transform: translateX(-200%); } 75%, 95% { transform: translateX(-300%); } 100% { transform: translateX(0); } }

Luego aplicas esta animación al contenedor. que contiene los elementos de tu diapositiva, por ejemplo .autoplay-carousel { display: flex; animation: slide 12s infinite; }Los rangos porcentuales definen los tiempos de "detención" en cada diapositiva para que el contenido sea legible antes de pasar a la siguiente.

Es fundamental añadir una forma para que los usuarios puedan pausar la reproducción automática.. Un patrón simple pero efectivo es pausar al pasar el ratón por encima con .autoplay-carousel:hover { animation-play-state: paused; }, para que los usuarios de ordenadores de sobremesa puedan detener el movimiento cuando interactúen con el contenido.

Las consideraciones de accesibilidad van aún más allá con las preferencias de movimiento.. Respecto a prefers-reduced-motion Se considera una buena práctica, por lo que puede desactivar la animación por completo para los usuarios que prefieran menos movimiento:

@media (prefers-reduced-motion: reduce) { .autoplay-carousel { animation: none; } }

Si bien las soluciones de reproducción automática CSS no pueden manejar fácilmente todos los casos límite que JS sí puede manejar.—al igual que los recuentos de diapositivas verdaderamente dinámicos o la lógica compleja de pausa/reanudación controlada por el usuario—, resultan sorprendentemente sólidos para carruseles simples y estáticos cuando se quiere evitar por completo la programación mediante scripts.

Comparación de carruseles solo con CSS y con JavaScript

Decidir entre CSS y JavaScript para un carrusel no es una cuestión de todo o nada.Depende de tus necesidades, público objetivo y presupuesto de mantenimiento. Sin embargo, en muchos casos prácticos, la balanza se ha inclinado considerablemente a favor de CSS.

Desde el punto de vista del rendimiento, los carruseles CSS son claros ganadores.No se analiza ni se ejecuta código de biblioteca, no hay detectores de eventos en cada interacción de desplazamiento ni recálculos de diseño en tiempo de ejecución activados por ajustes programados. El motor de desplazamiento del navegador está escrito en código nativo altamente optimizado y ajustado para todo tipo de dispositivos, desde ordenadores de sobremesa de gama alta hasta teléfonos de baja potencia.

En términos de accesibilidad, las nuevas funciones del carrusel CSS elevan significativamente el listón.Los botones y marcadores de desplazamiento que proporciona el navegador vienen preconfigurados con roles ARIA, comportamiento de teclado y anuncios que, de otro modo, habría que recrear meticulosamente en JavaScript. Incluso sin ellos, un carrusel con ajuste automático al desplazamiento puede hacerse accesible mediante roles y etiquetas.

Por otro lado, JavaScript sigue siendo útil para patrones muy avanzados.Si necesita una lógica de reproducción automática elaborada, ganchos de análisis, física personalizada o sincronizar varios carruseles con un estado compartido (por ejemplo, la imagen principal más la fila de miniaturas más la paginación externa), los enfoques basados ​​en scripts pueden ser más flexibles.

Sin embargo, la clave está en que muchos carruseles "cotidianos" en realidad no necesitan este nivel de complejidad.Una galería de productos sencilla, un carrusel de testimonios o una tira de "publicaciones destacadas" generalmente se pueden implementar con la función de ajuste de desplazamiento, algunas reglas CSS y controles nativos opcionales, lo que evita tener que añadir una dependencia de 50 KB solo para moverse entre tres diapositivas.

Otra consideración es la resiliencia cuando JavaScript falla.Los carruseles que solo utilizan CSS siguen funcionando perfectamente aunque JavaScript esté bloqueado por un proxy corporativo, interrumpido por un bloqueador de anuncios o simplemente no se haya cargado cuando el usuario acceda a la página. Este tipo de degradación gradual es difícil de lograr con bibliotecas que dependen de una fase de inicialización posterior a la carga de la página.

Buenas prácticas de accesibilidad para carruseles CSS

Aunque el navegador ayude con algunos aspectos de accesibilidad, usted sigue desempeñando un papel crucial. Para que tu carrusel CSS sea utilizable por todos, debes tener muy en cuenta la semántica, la gestión del enfoque y la sensibilidad al movimiento.

Primero, dale al carrusel un punto de referencia apropiado.. Envolviéndolo en un elemento con role="region" y una descriptiva aria-label Las opciones como "Galería de productos" o "Artículos destacados" facilitan a los usuarios de lectores de pantalla la búsqueda y comprensión de los productos.

Cada diapositiva también puede llevar una etiqueta accesible., por ejemplo a través de aria-label Se indica “Diapositiva 1 de 3”, “Diapositiva 2 de 3”, y así sucesivamente. De esta forma, cuando un usuario llega a una diapositiva, obtiene información inmediata sobre su posición en la secuencia.

No olvides los indicadores de enfoque visibles.. Cualquier elemento interactivo, ya sea un ::scroll-button, una ::scroll-marker-El enlace generado automáticamente, o un ancla manual en su navegación de reserva, necesita un estilo de enfoque claro que cumpla con las pautas de contraste y que no se elimine con los restablecimientos globales.

Si utilizas la reproducción automática o animaciones controladas por desplazamiento, respeta las preferencias de movimiento.. Utilizando prefers-reduced-motion Deshabilitar o simplificar las animaciones no es opcional si te preocupan los usuarios propensos al mareo por movimiento, y es bastante fácil encapsular los efectos más intensos en una consulta de medios.

Por último, considere los tamaños de los objetivos táctiles.Ya sea que estés diseñando marcadores de desplazamiento nativos o tus propios enlaces de navegación, mantén las áreas interactivas con un tamaño mínimo de 44 × 44 píxeles CSS. Esto generalmente implica un relleno y espaciado generosos, en lugar de círculos pequeños muy juntos.

Flujos de trabajo, herramientas y direcciones futuras del mundo real

Para facilitar la experimentación con carruseles CSS, algunos equipos han creado herramientas de configuración en tiempo real. donde puedes activar interruptores (habilitar botones de desplazamiento, alternar marcadores, ajustar modos de ajuste) y ver inmediatamente el CSS actualizado necesario para esa configuración. Estos entornos de pruebas son fantásticos para aprender experimentando.

Junto a los configuradores, galerías seleccionadas de demostraciones de carruseles solo con CSS muestran lo que es posible.Encontrarás patrones como interfaces con pestañas, navegación con desplazamiento, diapositivas por pasos, galerías de miniaturas y más, todos compartiendo la misma base de áreas de desplazamiento, además de ajuste y controles opcionales.

Muchos de estos sitios de demostración se distribuyen intencionalmente sin JavaScript. Para demostrarlo: una interfaz de usuario rica y con sensación interactiva se puede lograr completamente solo con HTML y CSS. A menudo exponen sus utilidades a través de @layer declaraciones, para que puedas inspeccionar y seleccionar los estilos que mejor se adapten a tu propio sistema de diseño.

De cara al futuro, la plataforma CSS ya está trabajando en dos importantes vías de evolución.La primera es “trae tus propios elementos”, donde en lugar de depender de botones y marcadores generados por el navegador, podrás insertar los tuyos propios. <a> y <button> marcado, sin dejar de beneficiarse de la lógica de desplazamiento subyacente.

Esto abriría la puerta a controles de marca con un estilo sofisticado, construidos con marcos de utilidad. Similar a Tailwind, pero manteniendo la semántica y el comportamiento propios de la plataforma. Básicamente, se decoraría la interfaz de usuario, pero el navegador seguiría siendo el cerebro de la operación.

La segunda gran área es el desplazamiento cíclico o infinito.Actualmente, muchos carruseles se reinician al llegar al final, volviendo sin interrupciones a la primera diapositiva. Implementar esto correctamente es complicado, ya que a menudo implica contenido duplicado o lógica compleja. La compatibilidad con el desplazamiento cíclico a nivel de plataforma permitiría a los navegadores gestionar este comportamiento de forma más elegante y eficiente.

A medida que estas características maduren y se extiendan más allá de Chrome a otros motores de búsquedaLa brecha entre lo que puede hacer un "carrusel CSS nativo" y lo que ofrecen las bibliotecas JavaScript de gran tamaño seguirá reduciéndose, lo que convertirá los enfoques sin scripts en el punto de partida predeterminado en lugar de un experimento excepcional.

En definitiva, el CSS moderno te da motivos de sobra para replantearte cómo creas carruseles.Partiendo de un diseño sencillo con ajuste automático al desplazamiento, incorporando botones y marcadores experimentales donde sea compatible, e integrando las mejores prácticas de accesibilidad, puedes crear deslizadores responsivos, fluidos y robustos sin depender de JavaScript. Para muchos proyectos, esto se traduce en páginas más rápidas, menos código que mantener y una experiencia más sólida para todos los usuarios.