Carousel

A slideshow component for cycling through elements.

Examples

Basic Carousel

blade

<x-plume::form :showAlerts="false" formData="{ 'currentSlide': 0 }">
    <x-plume::carousel model="currentSlide" indicators class="max-w-md">
        <x-plume::carousel.item class="bg-primary/10 aspect-video rounded-xl">
            <div class="flex h-full items-center justify-center">
                <span class="text-2xl font-bold text-primary">Slide 1</span>
            </div>
        </x-plume::carousel.item>
        <x-plume::carousel.item class="bg-secondary/10 aspect-video rounded-xl">
            <div class="flex h-full items-center justify-center">
                <span class="text-2xl font-bold text-secondary">Slide 2</span>
            </div>
        </x-plume::carousel.item>
        <x-plume::carousel.item class="bg-accent/10 aspect-video rounded-xl">
            <div class="flex h-full items-center justify-center">
                <span class="text-2xl font-bold text-accent">Slide 3</span>
            </div>
        </x-plume::carousel.item>
    </x-plume::carousel>
</x-plume::form>

Autoplay

Automatically cycle through slides with a custom interval.

Auto Slide A

Auto Slide B

blade

<x-plume::carousel autoplay interval="3000" :controls="false" indicators>
    <x-plume::carousel.item
        class="bg-background-100 dark:bg-background-800 aspect-video rounded-xl text-center flex items-center justify-center">
        <span class="text-xl font-medium">Auto Slide A</span>
    </x-plume::carousel.item>
    <x-plume::carousel.item
        class="bg-background-200 dark:bg-background-700 aspect-video rounded-xl text-center flex items-center justify-center">
        <span class="text-xl font-medium">Auto Slide B</span>
    </x-plume::carousel.item>
</x-plume::carousel>

Prop	Type	Default	Description
autoplay	bool	false	Whether the carousel should automatically cycle through slides.
interval	int	3000	The time delay between slides in milliseconds when autoplay is enabled.
controls	bool	true	-
indicators	bool	true	-
model	string	null	AlpineJS model name for the active slide index.
onSlideChange	string	''	AlpineJS expression or function to call when the active slide changes.

Usage

blade

<x-plume::carousel>
    <x-plume::carousel.item>Slide 1</x-plume::carousel.item>
    <x-plume::carousel.item>Slide 2</x-plume::carousel.item>
</x-plume::carousel>