Basic

It supports swipe gestures on mobile.

@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

@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

@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.

Front end developers

We love last week frameworks.
Get started

Full stack developers

Where burnout is just a fancy term for Tuesday.

@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
Full stack developers - 1
Hey! - 2
@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