Carrusel vs. Marquesina
Un carrusel muestra diapositivas separadas con controles. Un marquee mantiene en movimiento una línea de contenido.
Use un carrusel cuando cada elemento necesite tiempo y controles. Use una marquesina solo para decoración sin importancia que pueda pausar y detenerse cuando se le pida.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Carrusel
Un carrusel muestra uno o pocos paneles a la vez. Las personas lo mueven con flechas, puntos o gestos táctiles.
Una galería de fotos tiene botones de Previous y Next y muestra el número de la diapositiva. Soporta deslizamientos y puede pausar la reproducción automática.
- Úsalo cuando
- Úsalo cuando los elementos tengan un orden pero no haya suficiente espacio para mostrarlos todos.
- No lo uses cuando
- Nunca escondas opciones importantes en un carrusel ni lo hagas moverse demasiado rápido por sí mismo.
- Nombre usado en código
aria-roledescription="carousel"
Marquee
Una tira de contenido que se repite y no para de moverse. Debe ofrecer controles o una versión quieta para las personas sensibles al movimiento.
Una página de festival mueve una lista corta de patrocinadores lentamente. Se pausa al pasar el mouse o al seleccionarla, y se convierte en una lista fija y ajustada con el movimiento reducido.
- Úsalo cuando
- Úselo solo para contenido corto y repetido que no sea esencial. El movimiento puede agregar ambiente, pero no debe bloquear la lectura.
- No lo uses cuando
- Nunca lo uses para instrucciones, texto largo, mensajes urgentes o palabras que las personas deben seguir para leer.
- Nombre usado en código
overflow clip + duplicated track + prefers-reduced-motion
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| CarruselCarousel | Úsalo cuando los elementos tengan un orden pero no haya suficiente espacio para mostrarlos todos. | Nunca escondas opciones importantes en un carrusel ni lo hagas moverse demasiado rápido por sí mismo. | aria-roledescription="carousel" |
| MarqueeMarquee | Úselo solo para contenido corto y repetido que no sea esencial. El movimiento puede agregar ambiente, pero no debe bloquear la lectura. | Nunca lo uses para instrucciones, texto largo, mensajes urgentes o palabras que las personas deben seguir para leer. | overflow clip + duplicated track + prefers-reduced-motion |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Carrusel (Carousel), Marquee (Marquee) para nuestro flujo de usuario real. Usa esta regla: Un carrusel muestra diapositivas separadas con controles. Un marquee mantiene en movimiento una línea de contenido. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.