Tipo 01
Varios visibles (multi-browse)
Uno grande, uno mediano y uno pequeño.
Componentes Carrusel (Material 3)
Carrusel (Material 3)
El carrusel de Material 3 muestra una colección de elementos que se deslizan, con tamaños que cambian según la posición: el del centro grande y los de los bordes más angostos.
Uso
Úsalo para explorar una colección visual de forma horizontal: álbumes, productos, lugares.
- Colecciones visuales para explorar
- Destacar un elemento y dejar ver los siguientes
- Contenido que hay que leer completo
- Pocos elementos: muéstralos en cuadrícula
Principios
1
Explorable
Siempre se ve que hay más elementos.
2
Jerarquía por tamaño
El elemento principal es el más grande.
3
Fluido
Los tamaños cambian suavemente al deslizar.
Tipos
Tipo 02
Sin contener (uncontained)
Elementos iguales que se salen del borde.
Tipo 03
Héroe (hero)
Uno muy grande y uno angosto que se asoma.
Tipo 04
Pantalla completa
Un elemento a la vez, vertical, en celular.
Anatomía
1234- Contenedor
- Elemento grande
- Elemento mediano
- Elemento pequeño
- Texto (opcional)
Comportamiento
- Al deslizar, cada elemento cambia de ancho según su posición.
- Se detiene en un elemento (snap) en vez de quedar a medias.
- En escritorio también se navega con flechas o rueda del mouse.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto | según el contenido; común 200 a 300 dp |
| Espacio entre elementos | 8 dp |
| Elemento pequeño | 40 a 56 dp de ancho |
| Forma | extra grande (28 dp) |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Lista
Usa una lista con nombre: aria-label="Galería de cursos".
Texto alternativo
alt en cada imagen.
Teclado
Los elementos deben recibir foco y desplazar el carrusel.