Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Carousel

A slideshow for cycling through content. Requires Alpine.js.

Usage
Slide 1
Slide 2
Slide 3
example.blade.php 
<x-slate::carousel class="mx-auto max-w-xs">
    <x-slate::carousel-content>
        <x-slate::carousel-item>
            <x-slate::card class="p-6 text-center">Slide 1</x-slate::card>
        </x-slate::carousel-item>
        <x-slate::carousel-item>
            <x-slate::card class="p-6 text-center">Slide 2</x-slate::card>
        </x-slate::carousel-item>
        <x-slate::carousel-item>
            <x-slate::card class="p-6 text-center">Slide 3</x-slate::card>
        </x-slate::carousel-item>
    </x-slate::carousel-content>
    <x-slate::carousel-previous />
    <x-slate::carousel-next />
</x-slate::carousel>

Composition
code 
Carousel
├── CarouselContent
│   └── CarouselItem (repeat)
├── CarouselPrevious
└── CarouselNext
Last updated .