UICarrusel
Un conjunto de diapositivas que se muestran de una en una, con controles para moverse entre ellas.
Un carrusel muestra unas pocas diapositivas relacionadas en el mismo espacio. Úsalo con moderación: a menudo la gente se pierde lo que no está en la primera.
Cuándo usarlo
Úsalo
- De tres a cinco diapositivas, la más importante primero.
- Mostrar los controles y los indicadores de posición.
- No iniciarlo automáticamente.
No
- Esconder contenido esencial en diapositivas posteriores.
- Avanzar solo más rápido de lo que se puede leer.
- Meter textos largos o formularios en las diapositivas.
Anatomía
Un marco (carousel) con diapositivas (carousel-item, una active), pies opcionales, controles de anterior y siguiente e indicadores.
Variantes y estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Controles × indicadores | Los dos: flechas para moverse, puntos para saber dónde estás y saltar. |
| Diapositivas × pies | Un pie corto sobre la diapositiva; el texto debe leerse sobre la imagen. |
| Carrusel × reproducción automática | Apagada. Lo mueve el usuario. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| Los controles son botones redondos con un tinte oscuro | Se ven sobre cualquier imagen y son tan grandes como un botón, así que son fáciles de pulsar. |
| El indicador actual es más largo que los demás | La posición se lee por la forma y no por el color de un punto. |
| El marco es redondeado y recorta las diapositivas | Combina con las tarjetas de alrededor. |
Clases
| Clase | Qué hace |
|---|---|
carousel, slide |
El marco |
carousel-inner, carousel-item |
Las diapositivas |
carousel-control-prev, carousel-control-next |
Controles |
carousel-indicators |
Puntos de posición |
carousel-caption |
Texto sobre una diapositiva |
En esta versión
Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. Los controles y los indicadores son botones.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. Los controles son enlaces y los indicadores son elementos de lista.
Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. Los controles son enlaces y los indicadores son elementos de lista.
Accesibilidad
- Los controles son botones o enlaces con texto para tecnologías de apoyo.
- Deja que el usuario pause o detenga el movimiento; no lo inicies solo.
- Cada diapositiva tiene alternativas de texto.