Carousel
Carousel component.
Carousel, Personalization Blocks
Example:
TallStackUi::personalize() ->carousel() ->block('block', 'classes');
<!-- 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'],])" />
<!-- 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'],]" />
<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', '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.
<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')" />