Carousel - Laravel Blade

Use the carousel component to slide through multiple elements and images using custom controls, indicators, and animations powered by Flowbite JS.

Default Slider

Blade code

<x-fwb.carousel id="default-carousel" :slide="true" :items="[
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-1.svg', 'alt' => 'Slide 1'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-2.svg', 'alt' => 'Slide 2'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-3.svg', 'alt' => 'Slide 3'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-4.svg', 'alt' => 'Slide 4'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-5.svg', 'alt' => 'Slide 5'],
]" />

Static Carousel (Controls Only)

Blade code

<x-fwb.carousel id="static-carousel" :indicators="false" :items="[
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-1.svg', 'alt' => 'Slide 1'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-2.svg', 'alt' => 'Slide 2'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-3.svg', 'alt' => 'Slide 3'],
]" />

Carousel with Links

Blade code

<x-fwb.carousel id="links-carousel" :items="[
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-1.svg', 'alt' => 'Slide 1', 'href' => '#slide-1'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-2.svg', 'alt' => 'Slide 2', 'href' => '#slide-2'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-3.svg', 'alt' => 'Slide 3', 'href' => '#slide-3'],
]" />

Custom Animation

Blade code

<x-fwb.carousel id="animation-carousel" duration="duration-200" easing="ease-linear" :items="[
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-1.svg', 'alt' => 'Slide 1'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-2.svg', 'alt' => 'Slide 2'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-3.svg', 'alt' => 'Slide 3'],
]" />

Slide without Controls

Blade code

<x-fwb.carousel id="no-controls-carousel" :slide="true" :controls="false" :items="[
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-1.svg', 'alt' => 'Slide 1'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-2.svg', 'alt' => 'Slide 2'],
    ['img' => 'https://flowbite.com/docs/images/carousel/carousel-3.svg', 'alt' => 'Slide 3'],
]" />

Custom Slot Content

Blade code

<x-fwb.carousel id="custom-carousel">
    <div class="hidden duration-700 ease-in-out" data-carousel-item="active">
        <div class="absolute inset-0 flex items-center justify-center bg-gray-300 dark:bg-gray-700">
            <span class="text-2xl font-bold text-heading">Custom Slide 1</span>
        </div>
    </div>
    <div class="hidden duration-700 ease-in-out" data-carousel-item>
        <div class="absolute inset-0 flex items-center justify-center bg-gray-400 dark:bg-gray-600">
            <span class="text-2xl font-bold text-heading">Custom Slide 2</span>
        </div>
    </div>
</x-fwb.carousel>

Component Properties

Carousel x-fwb.carousel

Prop Type Default Description
items array [] Array of slide items. Each item: ['img' => '...', 'alt' => '...', 'href' => '...']. Only img is required. When provided, slides are auto-generated. When empty, uses the default slot.
id string auto Unique identifier for the carousel. Auto-generated if not provided.
indicators bool true Show dot indicators at the bottom of the carousel.
controls bool true Show previous/next navigation buttons.
slide bool false Enable auto-sliding behavior. When false, carousel is static (manual navigation only).
duration string duration-700 Tailwind CSS duration class for slide transitions.
easing string ease-in-out Tailwind CSS easing class for slide transitions.