Carousel

A slideshow for cycling through a collection of content.

Horizontal, looping

First slide
Second slide
Third slide

Vertical, bounded

Top
Middle
Bottom
Component Code 
<div class="grid gap-8 lg:grid-cols-2">
    <div class="space-y-3">
        <p class="text-sm font-medium">Horizontal, looping</p>
        <april:carousel class="mx-auto w-full max-w-md rounded-lg border p-2">
            <april:carousel-item>
                <div class="flex aspect-video items-center justify-center rounded-md bg-primary p-6 text-2xl font-semibold text-primary-foreground">First slide</div>
            </april:carousel-item>
            <april:carousel-item>
                <div class="flex aspect-video items-center justify-center rounded-md bg-secondary p-6 text-2xl font-semibold text-secondary-foreground">Second slide</div>
            </april:carousel-item>
            <april:carousel-item>
                <div class="flex aspect-video items-center justify-center rounded-md bg-muted p-6 text-2xl font-semibold">Third slide</div>
            </april:carousel-item>
        </april:carousel>
    </div>
 
    <div class="space-y-3">
        <p class="text-sm font-medium">Vertical, bounded</p>
        <april:carousel orientation="vertical" :loop="false" class="mx-auto h-64 w-full max-w-md rounded-lg border p-2">
            <april:carousel-item>
                <div class="flex h-60 items-center justify-center rounded-md bg-muted p-6 text-lg font-semibold">Top</div>
            </april:carousel-item>
            <april:carousel-item>
                <div class="flex h-60 items-center justify-center rounded-md bg-secondary p-6 text-lg font-semibold text-secondary-foreground">Middle</div>
            </april:carousel-item>
            <april:carousel-item>
                <div class="flex h-60 items-center justify-center rounded-md bg-primary p-6 text-lg font-semibold text-primary-foreground">Bottom</div>
            </april:carousel-item>
        </april:carousel>
    </div>
</div>

Use carousel-item for each slide. The default slot is a collection, so each repeated slide is a child component. The carousel supports horizontal and vertical orientation and can loop or stop at its bounds.

<april:carousel>
    <april:carousel-item>First slide</april:carousel-item>
    <april:carousel-item>Second slide</april:carousel-item>
</april:carousel>

Set orientation="vertical" for a vertical carousel or use :loop="false" to disable wrapping.

Publishing Views

Use the following commands to publish these views:

php artisan april:publish carousel
php artisan april:publish carousel-item
April UI keeps package views in `vendor/` by default. The command uses Laravel's vendor publishing system and copies overrides to `resources/views/vendor/april/components`. To publish all components, run: 
php artisan april:publish --all
Review local overrides after an upgrade with `php artisan april:update --diff`.