v3.5.0 is out! Dozens of significant improvements overall! Keep your TallStackUI up to date to get the best experience.

Powerful suite of Blade components for TALL Stack apps.

Carousel

Carousel component.

# Basic Usage 

<!-- Basic array -->
<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" />
 
<!-- Also accept Laravel collection -->
<x-carousel :images="collect([
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
])" />

# Round 

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" round />

# Different Cover Image 

<!-- Using a dedicated attribute -->
<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" :cover="2" />
 
<!-- Setting per file -->
<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2', 'cover' => true],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" />

# Shuffle

An option to shuffle the images in the carousel.

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" shuffle />

# Autoplay 

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" autoplay />
 
<!-- You can use "interval" to control the time in seconds. -->
<x-carousel ... autoplay interval="2" />

# Autoplay, Stop on Hover 

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" autoplay stop-on-hover />

# Autoplay, Without Loop 

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" autoplay without-loop />

# Without Indicators 

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" without-indicators />

# Image Title & Description 

<x-carousel :images="[
    [
        'src' => url('assets/images/wallpapers/1.jpg'),
        'alt' => 'Wallpaper 1',
        'title' => 'Image 1',
        'description' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
    ],
    [
        'src' => url('assets/images/wallpapers/2.jpg'),
        'alt' => 'Wallpaper 2',
        'title' => 'Image 2',
        'description' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
    ],
    [
        'src' => url('assets/images/wallpapers/3.jpg'),
        'alt' => 'Wallpaper 3',
        'title' => 'Image 3',
        'description' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
    ],
]" />

# Clickable

An option to allow the images to be expanded when clicked.

<!-- When clickable is set, clicking any image opens it in a fullscreen
     lightbox with a close button at the top-right. Esc and clicking
     outside the image also close it. -->
<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" clickable />
 
<!-- The lightbox dispatches expand/collapse events on the carousel root.
     $event.detail will receive: {image: object|null} -->
<x-carousel :images="[...]" clickable
    x-on:expand="alert('Lightbox opened: ' + $event.detail.image.alt)"
    x-on:collapse="alert('Lightbox closed')" />

# Clickable Caption

An option to display a title and description in the lightbox.

<x-carousel clickable caption="overlay" :images="$images" />

You can also set caption="footer" to display the title and description out of the image.

<x-carousel clickable caption="footer" :images="$images" />

# Clickable Navigable

An option to browse the gallery from inside the lightbox. Adds prev/next buttons on the sides of the lightbox and listens for the ←/→ keyboard arrows. When the lightbox closes, the main carousel advances to whichever image was last viewed.

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" clickable navigable />
The navigable prop requires clickable .

# Clickable Navigable, Caption 

<x-carousel clickable navigable caption="overlay" :images="[
    [
        'src' => url('assets/images/wallpapers/1.jpg'),
        'alt' => 'Wallpaper 1',
        'title' => 'Image 1',
        'description' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
    ],
    [
        'src' => url('assets/images/wallpapers/2.jpg'),
        'alt' => 'Wallpaper 2',
        'title' => 'Image 2',
        'description' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
    ],
    [
        'src' => url('assets/images/wallpapers/3.jpg'),
        'alt' => 'Wallpaper 3',
        'title' => 'Image 3',
        'description' => 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.'
    ],
]" />

# Clickable Navigable, Without Loop 

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" clickable navigable without-loop />

# Fixed Aspect Radio 

<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" wrapper="aspect-[3/1]" />
Remember to rebuild your assets to tell TailwindCSS to build these aspect ratio classes.

# Slots

Header
Footer 
<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]">
    <x-slot:header>
        Header
    </x-slot:header>
    <x-slot:footer>
        Footer
    </x-slot:footer>
</x-carousel>

# Events

The next and previous events fire both for the main carousel view and for in-lightbox navigation when navigable is enabled. The expand and collapse events fire only on the actual open/close transitions of the lightbox — not on each step of the in-lightbox navigation.

<!-- The "next" and "previous" events fire both for the main carousel view
     and for in-lightbox navigation when "navigable" is enabled. The same
     listeners cover both cases without changes.
     $event.detail will receive: {current: integer, image: object{current image}} -->
 
<x-carousel :images="[
    ['src' => url('assets/images/wallpapers/1.jpg'), 'alt' => 'Wallpaper 1'],
    ['src' => url('assets/images/wallpapers/2.jpg'), 'alt' => 'Wallpaper 2'],
    ['src' => url('assets/images/wallpapers/3.jpg'), 'alt' => 'Wallpaper 3'],
]" x-on:next="alert('Navigated to the next image')"
   x-on:previous="alert('Navigated to the previous image')" />
 
<!-- "expand" and "collapse" fire only on the actual open/close transitions
     of the lightbox — not on each step of the in-lightbox navigation. Use
     "next" / "previous" to track navigation inside the lightbox. -->

Code highlighting provided by Torchlight