TallStackUI, Carousel

# 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')" />

# 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

<!-- $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')" />