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>

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