# Carrusel

> Fila de tarjetas con flechas: indicador, varias por vista, vertical, automático con pausa y sin JS.

Categoría: Contenido · Solar v0.8.0

Usa este HTML tal cual, con Tailwind y ccs-tailwind-config.js cargados (ver https://utiliza.me/solar/instalacion.html).

## Guía: Cuándo usarlo

- Para eventos o destacados que no caben en una fila.
- Si son 3 o menos, muéstralos todos.
- Nunca para contenido que la persona necesita ver sí o sí: lo que no está en la primera vista casi no se ve.

## Básico

```html
<div class="flex flex-wrap items-start justify-center gap-8"><section aria-roledescription="carrusel" aria-label="Carrusel" class="relative w-full max-w-xs px-12"><div class="overflow-hidden"><div class="flex -ml-4"><div role="group" aria-roledescription="diapositiva" aria-label="1 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">1</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="2 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">2</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="3 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">3</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="4 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">4</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="5 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">5</span></div></div></div></div><button type="button" aria-label="Anterior" disabled class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg left-0"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-label="Siguiente" class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg right-0 transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></section></div>
```

## Con indicador

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-xs"><section aria-roledescription="carrusel" aria-label="Carrusel" class="relative w-full max-w-xs px-12"><div class="overflow-hidden"><div class="flex -ml-4"><div role="group" aria-roledescription="diapositiva" aria-label="1 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">2</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="2 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">3</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="3 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">4</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="4 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">5</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="5 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">1</span></div></div></div></div><button type="button" aria-label="Anterior"  class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg left-0 transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-label="Siguiente" class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg right-0 transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></section><div class="mt-4 flex items-center justify-center gap-3"><div class="flex gap-1.5"><button type="button" aria-label="Ir a la diapositiva 1"  class="w-2 h-2 rounded-full bg-ccs-line-strong dark:bg-ccs-dark-line-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"></button><button type="button" aria-label="Ir a la diapositiva 2" aria-current="true" class="w-2 h-2 rounded-full bg-ccs-blue dark:bg-ccs-dark-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"></button><button type="button" aria-label="Ir a la diapositiva 3"  class="w-2 h-2 rounded-full bg-ccs-line-strong dark:bg-ccs-dark-line-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"></button><button type="button" aria-label="Ir a la diapositiva 4"  class="w-2 h-2 rounded-full bg-ccs-line-strong dark:bg-ccs-dark-line-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"></button><button type="button" aria-label="Ir a la diapositiva 5"  class="w-2 h-2 rounded-full bg-ccs-line-strong dark:bg-ccs-dark-line-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"></button></div><span class="text-sm text-ccs-slate dark:text-ccs-dark-text-2" aria-live="polite">Diapositiva 2 de 5</span></div></div></div>
```

## Varias por vista

```html
<div class="flex flex-wrap items-start justify-center gap-8"><section aria-roledescription="carrusel" aria-label="Próximos eventos" class="relative w-full max-w-4xl px-12"><div class="overflow-hidden"><div class="flex -ml-4"><div role="group" aria-roledescription="diapositiva" aria-label="1 de 4" class="min-w-0 shrink-0 grow-0 basis-full sm:basis-1/2 lg:basis-1/3 pl-4"><article class="rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white overflow-hidden dark:bg-ccs-dark-surface"><div class="ph aspect-[16/10] w-full outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10" role="img" aria-label="Imagen del evento"></div><div class="p-4"><div class="text-xs font-medium text-ccs-blue dark:text-ccs-dark-accent">12 nov · 09:00</div><h4 class="mt-1 text-base font-semibold">Seminario de comercio digital</h4><a href="#" class="mt-3 inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirme<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></article></div><div role="group" aria-roledescription="diapositiva" aria-label="2 de 4" class="min-w-0 shrink-0 grow-0 basis-full sm:basis-1/2 lg:basis-1/3 pl-4"><article class="rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white overflow-hidden dark:bg-ccs-dark-surface"><div class="ph aspect-[16/10] w-full outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10" role="img" aria-label="Imagen del evento"></div><div class="p-4"><div class="text-xs font-medium text-ccs-blue dark:text-ccs-dark-accent">19 nov · 08:30</div><h4 class="mt-1 text-base font-semibold">Desayuno de exportadores</h4><a href="#" class="mt-3 inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirme<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></article></div><div role="group" aria-roledescription="diapositiva" aria-label="3 de 4" class="min-w-0 shrink-0 grow-0 basis-full sm:basis-1/2 lg:basis-1/3 pl-4"><article class="rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white overflow-hidden dark:bg-ccs-dark-surface"><div class="ph aspect-[16/10] w-full outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10" role="img" aria-label="Imagen del evento"></div><div class="p-4"><div class="text-xs font-medium text-ccs-blue dark:text-ccs-dark-accent">26 nov · 15:00</div><h4 class="mt-1 text-base font-semibold">Taller de facturación</h4><a href="#" class="mt-3 inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirme<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></article></div><div role="group" aria-roledescription="diapositiva" aria-label="4 de 4" class="min-w-0 shrink-0 grow-0 basis-full sm:basis-1/2 lg:basis-1/3 pl-4"><article class="rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white overflow-hidden dark:bg-ccs-dark-surface"><div class="ph aspect-[16/10] w-full outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10" role="img" aria-label="Imagen del evento"></div><div class="p-4"><div class="text-xs font-medium text-ccs-blue dark:text-ccs-dark-accent">3 dic · 10:00</div><h4 class="mt-1 text-base font-semibold">Encuentro de pymes</h4><a href="#" class="mt-3 inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirme<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></article></div></div></div><button type="button" aria-label="Anterior" disabled class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg left-0"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-label="Siguiente" class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg right-0 transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></section></div>
```

## Con espacio

```html
<div class="flex flex-wrap items-start justify-center gap-8"><section aria-roledescription="carrusel" aria-label="Carrusel" class="relative w-full max-w-sm px-12"><div class="overflow-hidden"><div class="flex -ml-1"><div role="group" aria-roledescription="diapositiva" aria-label="1 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pl-1"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">1</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="2 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pl-1"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">2</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="3 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pl-1"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">3</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="4 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pl-1"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">4</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="5 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pl-1"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">5</span></div></div></div></div><button type="button" aria-label="Anterior" disabled class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg left-0"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-label="Siguiente" class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg right-0 transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></section></div>
```

## Vertical

```html
<div class="flex flex-wrap items-start justify-center gap-8"><section aria-roledescription="carrusel" aria-label="Carrusel" class="relative w-full max-w-xs py-12"><div class="overflow-hidden h-[220px]"><div class="flex flex-col -mt-4 h-full"><div role="group" aria-roledescription="diapositiva" aria-label="1 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pt-4"><div class="flex h-[100px] items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">1</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="2 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pt-4"><div class="flex h-[100px] items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">2</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="3 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pt-4"><div class="flex h-[100px] items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">3</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="4 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pt-4"><div class="flex h-[100px] items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">4</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="5 de 5" class="min-w-0 shrink-0 grow-0 basis-1/2 pt-4"><div class="flex h-[100px] items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">5</span></div></div></div></div><button type="button" aria-label="Anterior" disabled class="absolute left-1/2 -translate-x-1/2 top-0 rotate-90 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-label="Siguiente" class="absolute left-1/2 -translate-x-1/2 bottom-0 rotate-90 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></section></div>
```

## Automático, con pausa

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-xs"><section aria-roledescription="carrusel" aria-label="Carrusel" class="relative w-full max-w-xs px-12"><div class="overflow-hidden"><div class="flex -ml-4"><div role="group" aria-roledescription="diapositiva" aria-label="1 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">1</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="2 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">2</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="3 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">3</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="4 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">4</span></div></div><div role="group" aria-roledescription="diapositiva" aria-label="5 de 5" class="min-w-0 shrink-0 grow-0 basis-full pl-4"><div class="flex aspect-square items-center justify-center rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white p-6 dark:bg-ccs-dark-surface"><span class="text-4xl font-semibold">5</span></div></div></div></div><button type="button" aria-label="Anterior"  class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg left-0 transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:alt-arrow-left-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button><button type="button" aria-label="Siguiente" class="absolute top-1/2 -translate-y-1/2 grid place-items-center w-8 h-8 rounded-full border border-ccs-line-strong bg-white text-ccs-ink shadow-ccs-sm hover:border-ccs-blue hover:text-ccs-blue disabled:opacity-50 disabled:pointer-events-none dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg right-0 transition active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:alt-arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></button></section><div class="mt-4 flex justify-center"><button type="button"  class="inline-flex items-center justify-center gap-2 rounded-ccs font-medium transition whitespace-nowrap focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg h-8 px-3 text-sm border border-ccs-line-strong bg-white text-ccs-ink hover:border-ccs-blue hover:text-ccs-blue dark:border-ccs-dark-line-strong dark:bg-ccs-dark-surface dark:text-ccs-dark-text dark:hover:border-ccs-dark-text active:scale-95 motion-reduce:active:scale-100"><iconify-icon icon="solar:pause-outline" class="shrink-0 text-[18px] " aria-hidden="true"></iconify-icon>Pausar</button></div></div></div>
```

## Sin JS (deslizando)

```html
<div class="flex flex-wrap items-start justify-center gap-8"><div class="w-full max-w-md flex gap-4 overflow-x-auto snap-x snap-mandatory pb-2"><div class="snap-start shrink-0 w-64"><article class="rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white overflow-hidden dark:bg-ccs-dark-surface"><div class="ph aspect-[16/10] w-full outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10" role="img" aria-label="Imagen del evento"></div><div class="p-4"><div class="text-xs font-medium text-ccs-blue dark:text-ccs-dark-accent">12 nov · 09:00</div><h4 class="mt-1 text-base font-semibold">Seminario de comercio digital</h4><a href="#" class="mt-3 inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirme<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></article></div><div class="snap-start shrink-0 w-64"><article class="rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white overflow-hidden dark:bg-ccs-dark-surface"><div class="ph aspect-[16/10] w-full outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10" role="img" aria-label="Imagen del evento"></div><div class="p-4"><div class="text-xs font-medium text-ccs-blue dark:text-ccs-dark-accent">19 nov · 08:30</div><h4 class="mt-1 text-base font-semibold">Desayuno de exportadores</h4><a href="#" class="mt-3 inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirme<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></article></div><div class="snap-start shrink-0 w-64"><article class="rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white overflow-hidden dark:bg-ccs-dark-surface"><div class="ph aspect-[16/10] w-full outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10" role="img" aria-label="Imagen del evento"></div><div class="p-4"><div class="text-xs font-medium text-ccs-blue dark:text-ccs-dark-accent">26 nov · 15:00</div><h4 class="mt-1 text-base font-semibold">Taller de facturación</h4><a href="#" class="mt-3 inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirme<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></article></div><div class="snap-start shrink-0 w-64"><article class="rounded-ccs border border-ccs-line dark:border-ccs-dark-line bg-white overflow-hidden dark:bg-ccs-dark-surface"><div class="ph aspect-[16/10] w-full outline outline-1 -outline-offset-1 outline-ccs-ink/10 dark:outline-white/10" role="img" aria-label="Imagen del evento"></div><div class="p-4"><div class="text-xs font-medium text-ccs-blue dark:text-ccs-dark-accent">3 dic · 10:00</div><h4 class="mt-1 text-base font-semibold">Encuentro de pymes</h4><a href="#" class="mt-3 inline-flex items-center gap-1 text-sm text-ccs-blue dark:text-ccs-dark-accent hover:underline underline-offset-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ccs-blue dark:focus-visible:ring-ccs-dark-accent dark:focus-visible:ring-offset-ccs-dark-bg">Inscribirme<iconify-icon icon="solar:arrow-right-outline" class="shrink-0 text-[16px] " aria-hidden="true"></iconify-icon></a></div></article></div></div></div>
```

## Guía: Accesibilidad

El contenedor lleva aria-roledescription="carrusel" y nombre; cada diapositiva, role="group" con "2 de 5". Las flechas son botones con aria-label. Las diapositivas fuera de vista llevan inert para que el Tab no entre en ellas. Flechas izquierda y derecha con el foco en el carrusel.