WARNING! You are browsing the docs for an old version of TallStackUI. See the v4 docs.

Powerful suite of Blade components for TALL Stack apps.

Carousel

Carousel component.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v4.

# 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