takshak/adash-slider

Simple admin panel starter kit

3.2.6 2023-06-16 12:30 UTC

Requires

• jenssegers/agent: ^2.6
• takshak/adash: *

MIT

• Takshak Tiwari

• panel
• laravel
• dashboard
• admin panel
• breeze

README

An extension for slider for takshak/adash package. This will he helper to create image slider or even for cards, products etc

Installation

Require the package with composer

composer require takshak/adash-slider

Run the command to setup the table, pages, models and all

php artisan adash-slider:install

Add Component <x-aslider-aslider /> to your view where you want to show the slider. Multiple sliders for different location can be added through admin panel.

Component Options

Slider uses OwlCarousel2 for slider.

options: OwlCarousel2 options parameters should be passed in array format. eg:

<x-aslider-aslider :options="[
    'items' 	=>	2,
    'margin' 	=>	10,
    'nav'		=>	true
]" />

responsive: OwlCarousel2 options' responsive parameters should be passed in array format for responsiveness of slider. eg:

 <x-aslider-aslider :responsive="[
	    '0' 	=>	[
    	    'items' => 1,
    	    ...
	    ],
	    '480' 	=>	[
    	    'items' => 2,
    	    ...
	    ],
	    '768' 	=>	[
    	    'items' => 3,
    	    ...
	    ]
    ]" />

For more options and customization go to OwlCarousel2 documentation

Getting your custom slides: Demo

You can make your own slides for the slider. You just need to add an attribute custom-slides="1" with slideItems slot. Eg:

<x-aslider-aslider custom-slides="1">
    <x-slot:slideItems>
        <div class="card border-0 overflow-hidden">
            <div class="card-body text-center pb-5 px-4 pt-4">
                <p class="mb-2 fs-5">Lorem vel similique perspiciatis aperiam? ipsum dolor sit amet consectetur, adipisicing elit. Mollitia. Lorem ipsum dolor sit. Lorem, ipsum.   </p>
                <h4 class="fw-bold">Lorem, Slide 1.</h4>
            </div>
        </div>

        <div class="card border-0 overflow-hidden">
            <div class="card-body text-center pb-5 px-4 pt-4">
                <p class="mb-2 fs-5">Mollitia, vel similique perspiciatis aperiam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Lorem ipsum dolor sit. Lorem, ipsum.   </p>
                <h4 class="fw-bold">Lorem, Slide 2.</h4>
            </div>
        </div>
    </x-slot>
</x-aslider-aslider>

Slider Demos/Examples

• Default Slider:Demo

    <x-aslider-aslider />
  

• Slider with specific size's images:Demo

    <x-aslider-aslider size="large" />
  

• Slider without dots:Demo

    <x-aslider-aslider :dots="false" :nav="true" />
  

• Slider without autoplay:Demo

    <x-aslider-aslider :autoplay="false" />
  

• Slider with only 2 slides:Demo

    <x-aslider-aslider limit="2" />
  

• Show different slider:Demo

    <x-aslider-aslider slider="Example Slider" />
  

• Slider with advance options:Demo

    <x-aslider-aslider slider="Example Slider" size="medium" :options="[
        'items'     =>  2,
        'margin'    =>  0,
        'loop'      =>  false,
        'autoplayTimeout'   =>  2000,
        'autoplayHoverPause'    =>  true
    ]" />
  

• Slider with background image, title and subtitle:Demo

    <x-aslider-aslider slider="Background Slider" />