Carousel

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.

Let`s go!

@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