blatui

Components

Carousel

A carousel with motion and swipe.

php artisan blatui:add carousel
1
2
3
4
5
<x-ui.carousel class="w-full max-w-xs">
    <x-ui.carousel-content>
        @foreach (range(1, 5) as $i)
            <x-ui.carousel-item>
                <div class="p-1">
                    <x-ui.card variant="sectioned">
                        <x-ui.card-content class="flex aspect-square items-center justify-center p-6">
                            <span class="text-4xl font-semibold">{{ $i }}</span>
                        </x-ui.card-content>
                    </x-ui.card>
                </div>
            </x-ui.carousel-item>
        @endforeach
    </x-ui.carousel-content>
    <x-ui.carousel-previous />
    <x-ui.carousel-next />
</x-ui.carousel>

Multiple

1
2
3
4
5
6
7
8
{{-- Several slides visible at once (responsive: 2 on mobile, 3 from md up). --}}
<x-ui.carousel class="w-full max-w-sm">
    <x-ui.carousel-content>
        @foreach (range(1, 8) as $i)
            <x-ui.carousel-item class="basis-1/2 md:basis-1/3">
                <div class="p-1">
                    <x-ui.card variant="sectioned">
                        <x-ui.card-content class="flex aspect-square items-center justify-center p-6">
                            <span class="text-3xl font-semibold">{{ $i }}</span>
                        </x-ui.card-content>
                    </x-ui.card>
                </div>
            </x-ui.carousel-item>
        @endforeach
    </x-ui.carousel-content>
    <x-ui.carousel-previous />
    <x-ui.carousel-next />
</x-ui.carousel>

Testimonials

"BlatUI cut our build time in half. The components just work."

SC
Sofia Carter
Lead Engineer

"Accessible by default and beautiful out of the box. A rare combo."

JD
Jackson Doe
Design Systems

"Copy, paste, own the code. Exactly how a component library should feel."

AB
Amelia Bell
Frontend Dev
@php
    $quotes = [
        ['quote' => 'BlatUI cut our build time in half. The components just work.', 'name' => 'Sofia Carter', 'role' => 'Lead Engineer', 'initials' => 'SC'],
        ['quote' => 'Accessible by default and beautiful out of the box. A rare combo.', 'name' => 'Jackson Doe', 'role' => 'Design Systems', 'initials' => 'JD'],
        ['quote' => 'Copy, paste, own the code. Exactly how a component library should feel.', 'name' => 'Amelia Bell', 'role' => 'Frontend Dev', 'initials' => 'AB'],
    ];
@endphp
<x-ui.carousel class="w-full max-w-sm">
    <x-ui.carousel-content>
        @foreach ($quotes as $q)
            <x-ui.carousel-item>
                <div class="p-1">
                    <x-ui.card variant="sectioned">
                        <x-ui.card-content class="flex flex-col gap-4 p-6">
                            <p class="text-sm leading-relaxed">"{{ $q['quote'] }}"</p>
                            <div class="flex items-center gap-3">
                                <x-ui.avatar class="size-8"><x-ui.avatar-fallback>{{ $q['initials'] }}</x-ui.avatar-fallback></x-ui.avatar>
                                <div class="text-sm">
                                    <div class="font-medium">{{ $q['name'] }}</div>
                                    <div class="text-muted-foreground text-xs">{{ $q['role'] }}</div>
                                </div>
                            </div>
                        </x-ui.card-content>
                    </x-ui.card>
                </div>
            </x-ui.carousel-item>
        @endforeach
    </x-ui.carousel-content>
    <x-ui.carousel-previous />
    <x-ui.carousel-next />
</x-ui.carousel>

Vertical

1
2
3
4
5
<x-ui.carousel orientation="vertical" class="w-full max-w-xs">
    <x-ui.carousel-content class="h-[240px]">
        @foreach (range(1, 5) as $i)
            <x-ui.carousel-item class="h-full">
                <div class="h-full p-1">
                    <x-ui.card variant="sectioned" class="h-full">
                        <x-ui.card-content class="flex h-full items-center justify-center p-6">
                            <span class="text-4xl font-semibold">{{ $i }}</span>
                        </x-ui.card-content>
                    </x-ui.card>
                </div>
            </x-ui.carousel-item>
        @endforeach
    </x-ui.carousel-content>
    <x-ui.carousel-previous />
    <x-ui.carousel-next />
</x-ui.carousel>

API Reference

Props, slots and exposed methods for <x-ui.carousel>.

Props

Prop Type Default Description
orientation string 'horizontal' Scroll axis. "vertical" needs a fixed height on <x-ui.carousel-content> (e.g. class="h-[240px]").
horizontal vertical
swipe bool true Enable touch/pen swipe to change slides. A mouse always uses the previous/next arrows, regardless of this setting.

Slots

Slot Description
default The carousel parts, all sharing the root's Alpine scope: <x-ui.carousel-content> wrapping one <x-ui.carousel-item> per slide (set a basis class like basis-1/2 on an item to show multiple at once), plus <x-ui.carousel-previous> and <x-ui.carousel-next> arrow buttons.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
prev() Move to the previous slide (no-op at the first slide).
next() Move to the next slide (no-op at the last slide).