An image carousel inspired by penguin UI.
| Property | Type | Description |
|---|---|---|
| slides | array | The image urls contained in the carousel. |
| id | ?string | A unique identifier. |
| without-indicators | bool | If the dot indicators should be hidden or not. [default=false] |
| without-arrows | bool | If the arrow buttons should be hidden or not. [default=false] |
| autoplay | bool | If the images should automatically loop. [default=false] |
| interval | ?int | How long (ms) to show each image for when $autoplay is enabled. [default=2000] |
{{--
public array $slides = [
['image' => 'https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp'],
['image' => 'https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp'],
['image' => 'https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp'],
];
--}}
<c-carousel :slides="$this->slides" />
{{-- Class --}}
<c-carousel :slides="$this->slides" class="mx-auto w-32! rounded-none!" />
{{-- No dot indicators --}}
<c-carousel :slides="$this->slides" without-indicators />
{{-- No arrow buttons --}}
<c-carousel :slides="$this->slides" without-arrows />
<c-carousel :slides="$this->slides" without-indicators without-arrows autoplay />
{{-- 5 seconds --}}
<c-carousel :slides="$this->slides" autoplay interval="5000" />
Play around removing some attributes. The only required attribute is image.
Full stack developers
Where burnout is just a fancy term for Tuesday.
{{--
public array $fullSlides = [
[
'image' => 'https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp',
'title' => 'Frontend developers',
'description' => 'We love last week frameworks.',
'url' => '/docs/install',
'urlText' => 'Get started',
'lazy' => true, // Enable lazy loading for this image. Default is eager.
],
[
'image' => 'https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp',
'title' => 'Full stack developers',
'description' => 'Where burnout is just a fancy term for Tuesday.',
],
[
'image' => 'https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp',
'url' => '/docs/install',
'urlText' => 'Let`s go!',
],
[
'image' => 'https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp',
'url' => '/docs/install',
],
];
--}}
<c-carousel :slides="$this->fullSlides" />
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.
Ice cream 👋 0
Grapes 👋 1
Lemons 👋 2
{{-- public array $slotSlides = [
[
'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!',
],
];
--}}
<c-carousel :slides="$this->slotSlides" class="h-96!">
@scope('content', $slide)
<div class="mt-16 bg-base-300 font-bold text-base-content rounded-field p-2 w-fit mx-auto">
{{ $slide['title'] }} 👋 {{ $loop->index }}
</div>
@endscope
</c-carousel>