Carousel
Basic
It supports swipe gestures on mobile.
@php
$slides = [
[
'image' => '/images/photos/photo-1494253109108-2e30c049369b.jpg',
],
[
'image' => '/images/photos/photo-1565098772267-60af42b81ef2.jpg',
],
[
'image' => '/images/photos/photo-1559703248-dcaaec9fab78.jpg',
],
[
'image' => '/images/photos/photo-1572635148818-ef6fd45eb394.jpg',
],
];
@endphp
<x-carousel :slides="$slides" />
No indicators
@php $slides = [ [ 'image' => '/images/photos/photo-1565098772267-60af42b81ef2.jpg', ], [ 'image' => '/images/photos/photo-1559703248-dcaaec9fab78.jpg', ], [ 'image' => '/images/photos/photo-1494253109108-2e30c049369b.jpg', ], [ 'image' => '/images/photos/photo-1572635148818-ef6fd45eb394.jpg', ], ]; @endphp <x-carousel :slides="$slides" without-indicators />
No arrows
@php $slides = [ [ 'image' => '/images/photos/photo-1572635148818-ef6fd45eb394.jpg', ], [ 'image' => '/images/photos/photo-1565098772267-60af42b81ef2.jpg', ], [ 'image' => '/images/photos/photo-1494253109108-2e30c049369b.jpg', ], [ 'image' => '/images/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" />
Autoplay
@php $slides = [ [ 'image' => '/images/photos/photo-1572635148818-ef6fd45eb394.jpg', ], [ 'image' => '/images/photos/photo-1565098772267-60af42b81ef2.jpg', ], [ 'image' => '/images/photos/photo-1494253109108-2e30c049369b.jpg', ], [ 'image' => '/images/photos/photo-1559703248-dcaaec9fab78.jpg', ], ]; @endphp <x-carousel :slides="$slides" autoplay class="!h-32" />
You can change interval by passing the interval attribute.
{{-- Default interval is 2000 milliseconds. --}}
<x-carousel ... autoplay interval="3000" />
Full
Play around removing some attributes. The only required attribute is image.
Full stack developers
Where burnout is just a fancy term for Tuesday.
@php
$slides = [
[
'image' => '/images/photos/photo-1559703248-dcaaec9fab78.jpg',
'title' => 'Frontend developers',
'description' => 'We love last week frameworks.',
'url' => '/docs/installation',
'urlText' => 'Get started',
],
[
'image' => '/images/photos/photo-1565098772267-60af42b81ef2.jpg',
'title' => 'Full stack developers',
'description' => 'Where burnout is just a fancy term for Tuesday.',
],
[
'image' => '/images/photos/photo-1494253109108-2e30c049369b.jpg',
'url' => '/docs/installation',
'urlText' => 'Let`s go!',
],
[
'image' => '/images/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.
Frontend developers - 0
Full stack developers - 1
Hey! - 2
@php
$slides = [
[
'image' => '/images/photos/photo-1559703248-dcaaec9fab78.jpg',
'title' => 'Frontend developers',
],
[
'image' => '/images/photos/photo-1565098772267-60af42b81ef2.jpg',
'title' => 'Full stack developers',
],
[
'image' => '/images/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>
Made with
by
Robson Tenório and contributors.