jquery.app
Espanol
EnglishDeutschFrancaisEspanol日本語Nederlands

Herramientas CSS

Gratis CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Cargando herramienta...

Qué es CSS Carousel Generator?

Un carrusel CSS es un contenedor desplazable horizontal o verticalmente donde los elementos se ajustan en posición mientras el usuario se desplaza. El CSS moderno (Chrome 135+) agrega botones de desplazamiento y marcadores integrados que funcionan sin JavaScript, además de consultas de estado de desplazamiento para estilizar el elemento actualmente ajustado de manera diferente a los demás. Esta es una alternativa nativa a las bibliotecas de carrusel JavaScript.

Respuesta rápida

Construya un carrusel CSS nativo con scroll-snap, botones y marcadores — no necesita JavaScript. Use scroll-snap-type para el comportamiento de ajuste, ::scroll-button() para flechas, ::scroll-marker() para puntos y consultas scroll-state(snapped: true) para estilizar el elemento activo. Chrome 135+ para todas las funciones; degradación elegante en otros navegadores.

Last updated: 2026-05-28

Limitaciones

  • Los botones de desplazamiento (::scroll-button()) y marcadores (::scroll-marker()) requieren Chrome 135+. Firefox y Safari aún no los admiten. El carrusel retrocede a un contenedor desplazable estándar.
  • Los carruseles CSS no pueden avanzar automáticamente, hacer bucles infinitos o manejar recuentos dinámicos de elementos sin JavaScript. Para funciones avanzadas de carrusel, use una pequeña mejora JS sobre la base CSS.
  • Las consultas scroll-state (container-type: scroll-state) son parte de la misma versión Chrome 135+. El soporte entre navegadores para estilizar elementos activos requiere un fallback JavaScript.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Cómo usar esta herramienta

  1. Elija la dirección del diseño (horizontal o vertical) y el ancho del elemento.
  2. Configure el comportamiento de ajuste y la alineación — mandatory ajusta a cada elemento, proximity ajusta cuando está cerca.
  3. Opcionalmente incluya botones de desplazamiento y puntos marcadores para navegación.
  4. Elija el marcado de lista accesible (ul/li) y el número de elementos para la salida de demostración.
  5. Copie el CSS y HTML en su página. Agregue contenido real a cada elemento del carrusel.

Para qué puedes usarla

  • Construir un carrusel de imágenes de producto sin agregar una biblioteca JavaScript.
  • Crear un carril de tarjetas para publicaciones de blog o listados estilo tienda de aplicaciones.
  • Hacer una galería de imágenes accesible con desplazamiento navegable por teclado y puntos de ajuste.

Casos de uso

Ejemplos prácticos

Ejemplo

Galería de imágenes de producto

Una página de producto de comercio electrónico necesita un carrusel de imágenes horizontal. Use la herramienta con ajuste mandatory, alineación start y marcadores de desplazamiento. Los visitantes deslizan o se desplazan por las imágenes del producto con puntos indicadores que muestran la posición.

Ejemplo

Carril de tarjetas de blog

Una página de inicio de blog muestra publicaciones recientes en un carril de tarjetas desplazable horizontalmente. Use ajuste proximity con botones de desplazamiento para que los visitantes puedan hacer clic en las flechas o deslizar para navegar por los artículos recientes.

Errores comunes

  • Usar ajuste mandatory en carruseles muy largos — los usuarios no pueden desplazarse rápidamente por múltiples elementos, lo que se siente lento.
  • Olvidar hacer que el contenedor de desplazamiento sea enfocable por teclado — los usuarios de teclado necesitan tabindex="0" para desplazarse con las teclas de flecha.
  • Usar anchos fijos en píxeles sin considerar móvil — elementos de 300px en una pantalla de 320px apenas dejan ver el siguiente elemento.

Verificación

  1. Pruebe el carrusel con navegación por teclado: enfoque el contenedor y use las teclas de flecha para desplazarse por los elementos.
  2. Verifique que los puntos de ajuste funcionen correctamente en dispositivos táctiles — cada deslizamiento debe ajustarse al elemento más cercano.

FAQ

Preguntas sobre CSS Carousel Generator

Qué navegadores admiten los botones y marcadores de desplazamiento CSS?

Los botones de desplazamiento (::scroll-button()) y marcadores (::scroll-marker()) requieren Chrome 135+. scroll-snap en sí es compatible con todos los navegadores modernos (Chrome 69+, Firefox 99+, Safari 11+). El carrusel degrada elegantemente: los navegadores sin soporte de botones/marcadores muestran un contenedor desplazable estándar con comportamiento de ajuste.

Necesito JavaScript para un carrusel CSS?

Para comportamiento básico de desplazamiento y ajuste, no se necesita JavaScript. Los botones de desplazamiento y marcadores funcionan declarativamente en Chrome 135+. Para funciones como avance automático, bucle infinito o recuento dinámico de elementos, todavía se requiere una pequeña cantidad de JavaScript. Esta herramienta genera la base sin JavaScript.

Cómo estilizo el elemento activo del carrusel de manera diferente?

Use la consulta de contenedor scroll-state(): @container scroll-state(snapped: true) { .item { opacity: 1; } }. Esto requiere container-type: scroll-state en el contenedor de desplazamiento. Para navegadores sin soporte de scroll-state, use un fallback de evento scroll de JavaScript o IntersectionObserver.

Herramientas relacionadas

Más herramientas css

Prueba también

Prueba también