There are still dozens of new things to be done in 2025 in TallStackUI v2. Stay tuned for every release!

Powerful suite of Blade components for TALL Stack apps.

Carousel

Carousel component.

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

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 />
<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" />
<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 />
<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 />
<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 />
<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.'
],
]" />
<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.

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

Code highlighting provided by Torchlight