Carousel
Carrusel
Un carrusel muestra uno o pocos paneles a la vez. Las personas lo mueven con flechas, puntos o gestos táctiles.
Un ejemplo real
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.
Partes principales
- 01Trigger or task context
- 02Primary control surface
- 03Feedback, focus, and dismissal
Ú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" Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Carrusel (Carousel). User context: 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. Recommended pattern: Carrusel (Carousel). Why it fits: Úsalo cuando los elementos tengan un orden pero no haya suficiente espacio para mostrarlos todos. Do not use it when: Nunca escondas opciones importantes en un carrusel ni lo hagas moverse demasiado rápido por sí mismo. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Carrusel (Carousel) is used now. Definition: Un carrusel muestra uno o pocos paneles a la vez. Las personas lo mueven con flechas, puntos o gestos táctiles. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.