K
KoreUI

Carousel

UI

Componente de carrusel con navegación, indicadores, autoplay, swipe y soporte multi-slide.

Uso básico

Slide 1
Slide 2
Slide 3 
<x-kore::carousel>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 1
        </div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 2
        </div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 3
        </div>
    </x-kore::carousel.slide>
</x-kore::carousel>
<x-kore::carousel>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 1
        </div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 2
        </div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 3
        </div>
    </x-kore::carousel.slide>
</x-kore::carousel>

Autoplay

Reproducción automática con intervalo configurable.

Slide 1
Slide 2
Slide 3 
<x-kore::carousel :autoplay="true" :interval="3000">
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 1
        </div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 2
        </div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 3
        </div>
    </x-kore::carousel.slide>
</x-kore::carousel>
<x-kore::carousel :autoplay="true" :interval="3000">
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 1
        </div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 2
        </div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-48 bg-kore-muted rounded-lg">
            Slide 3
        </div>
    </x-kore::carousel.slide>
</x-kore::carousel>

Múltiples slides visibles

Muestra varios slides a la vez con numVisible.

1
2
3
4
5
<x-kore::carousel :numVisible="3" :gap="24">
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">1</div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">2</div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">3</div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">4</div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">5</div>
    </x-kore::carousel.slide>
</x-kore::carousel>
<x-kore::carousel :numVisible="3" :gap="24">
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">1</div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">2</div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">3</div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">4</div>
    </x-kore::carousel.slide>
    <x-kore::carousel.slide>
        <div class="flex items-center justify-center h-32 bg-kore-muted rounded-lg">5</div>
    </x-kore::carousel.slide>
</x-kore::carousel>

Accesibilidad

Qué cambió en la 2.0, y por qué.

  • Los indicadores ya no son role="tab", sino botones con aria-current: no había ningún tabpanel al otro lado. Si los localizabas por rol en tus tests, cambia el selector.
  • Con autoplay se pinta un botón de pausa. Un carrusel que se mueve solo y no se puede parar incumple la WCAG; antes no había forma de detenerlo.
  • Las diapositivas fuera de vista llevan inert: lo que hay dentro de una oculta ya no se puede enfocar con el tabulador. Para llegar a un enlace de una diapositiva, primero hay que moverse a ella.
  • El aria-roledescription dice «carrusel» y «diapositiva», no «carousel» y «slide»: no es un rol, es texto que el lector pronuncia, así que va en el idioma del contenido.

Props

Prop Tipo Default Descripción
autoplay bool config(false) Reproducción automática
interval int config(5000) Intervalo de autoplay en ms
loop bool config(true) Navegación circular
pauseOnHover bool config(true) Pausar autoplay al hover
showIndicators bool config(true) Mostrar indicadores (dots)
showNavigation bool config(true) Mostrar flechas de navegación
numVisible int config(1) Slides visibles simultáneamente
gap int config(16) Espacio entre slides en px
ariaLabel string|null config(Carrusel) Nombre de la región. Ponlo cuando haya varios carruseles en la misma página
Cargando