Carousel
Basic
It supports swipe gestures on mobile.
![](/photos/photo-1494253109108-2e30c049369b.jpg)
![](/photos/photo-1565098772267-60af42b81ef2.jpg)
![](/photos/photo-1559703248-dcaaec9fab78.jpg)
![](/photos/photo-1572635148818-ef6fd45eb394.jpg)
@php $slides = [ [ 'image' => '/photos/photo-1494253109108-2e30c049369b.jpg', ], [ 'image' => '/photos/photo-1565098772267-60af42b81ef2.jpg', ], [ 'image' => '/photos/photo-1559703248-dcaaec9fab78.jpg', ], [ 'image' => '/photos/photo-1572635148818-ef6fd45eb394.jpg', ], ];@endphp <x-carousel :slides="$slides" />
No indicators
![](/photos/photo-1565098772267-60af42b81ef2.jpg)
![](/photos/photo-1559703248-dcaaec9fab78.jpg)
![](/photos/photo-1494253109108-2e30c049369b.jpg)
![](/photos/photo-1572635148818-ef6fd45eb394.jpg)
@php $slides = [ [ 'image' => '/photos/photo-1565098772267-60af42b81ef2.jpg', ], [ 'image' => '/photos/photo-1559703248-dcaaec9fab78.jpg', ], [ 'image' => '/photos/photo-1494253109108-2e30c049369b.jpg', ], [ 'image' => '/photos/photo-1572635148818-ef6fd45eb394.jpg', ], ]; @endphp <x-carousel :slides="$slides" without-indicators />
No arrows
![](/photos/photo-1572635148818-ef6fd45eb394.jpg)
![](/photos/photo-1565098772267-60af42b81ef2.jpg)
![](/photos/photo-1494253109108-2e30c049369b.jpg)
![](/photos/photo-1559703248-dcaaec9fab78.jpg)
@php $slides = [ [ 'image' => '/photos/photo-1572635148818-ef6fd45eb394.jpg', ], [ 'image' => '/photos/photo-1565098772267-60af42b81ef2.jpg', ], [ 'image' => '/photos/photo-1494253109108-2e30c049369b.jpg', ], [ 'image' => '/photos/photo-1559703248-dcaaec9fab78.jpg', ], ]; @endphp {{-- Notice you can also override some wrapper CSS classes. --}}<x-carousel :slides="$slides" without-arrows class="!h-32 !rounded-none" />
Full
Play around removing some attributes. The only required attribute is image
.
![](/photos/photo-1559703248-dcaaec9fab78.jpg)
Full stack developers
Where burnout is just a fancy term for Tuesday.
![](/photos/photo-1565098772267-60af42b81ef2.jpg)
![](/photos/photo-1572635148818-ef6fd45eb394.jpg)
@php $slides = [ [ 'image' => '/photos/photo-1559703248-dcaaec9fab78.jpg', 'title' => 'Front end developers', 'description' => 'We love last week frameworks.', 'url' => '/docs/installation', 'urlText' => 'Get started', ], [ 'image' => '/photos/photo-1565098772267-60af42b81ef2.jpg', 'title' => 'Full stack developers', 'description' => 'Where burnout is just a fancy term for Tuesday.', ], [ 'image' => '/photos/photo-1494253109108-2e30c049369b.jpg', 'url' => '/docs/installation', 'urlText' => 'Let`s go!', ], [ 'image' => '/photos/photo-1572635148818-ef6fd45eb394.jpg', 'url' => '/docs/installation', ], ];@endphp <x-carousel :slides="$slides" />
Custom slot
By using the special blade directive @scope
you have access to the current item from loop.
Notice also you have access to the Laravel`s $loop
variable.
Front end developers - 0
![](/photos/photo-1559703248-dcaaec9fab78.jpg)
Full stack developers - 1
![](/photos/photo-1565098772267-60af42b81ef2.jpg)
Hey! - 2
![](/photos/photo-1494253109108-2e30c049369b.jpg)
@php $slides = [ [ 'image' => '/photos/photo-1559703248-dcaaec9fab78.jpg', 'title' => 'Front end developers', ], [ 'image' => '/photos/photo-1565098772267-60af42b81ef2.jpg', 'title' => 'Full stack developers', ], [ 'image' => '/photos/photo-1494253109108-2e30c049369b.jpg', 'title' => 'Hey!', ], ];@endphp <x-carousel :slides="$slides"> @scope('content', $slide) <div class="mt-16 bg-red-500 font-bold text-white rounded p-2 w-fit mx-auto"> {{ $slide['title'] }} - {{ $loop->index }} </div> @endscope</x-carousel>
maryUI
Sponsor