README

takshak/adash包的滑块扩展。这将是创建图片滑块或用于卡片、产品等的助手。

安装

使用composer安装此包

composer require takshak/adash-slider

运行命令以设置表、页面、模型等

php artisan adash-slider:install

将组件 <x-aslider-aslider /> 添加到您想显示滑块的视图中。可以通过管理员面板添加多个不同位置的滑块。

组件选项

滑块使用 OwlCarousel2 作为滑块。

options: OwlCarousel2选项参数应以数组格式传递。例如

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

responsive: OwlCarousel2选项的响应参数应以数组格式传递以实现滑块的响应性。例如

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

有关更多选项和自定义，请访问 OwlCarousel2 文档

获取自定义幻灯片： 演示

您可以为滑块制作自己的幻灯片。您只需添加一个具有 slideItems 插槽的属性 custom-slides="1"。例如

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

滑块演示/示例

• 默认滑块：演示

    <x-aslider-aslider />
  

• 具有特定尺寸图像的滑块：演示

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

• 无点的滑块：演示

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

• 无自动播放的滑块：演示

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

• 仅2个幻灯片的滑块：演示

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

• 显示不同的滑块：演示

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

• 具有高级选项的滑块：演示

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

• 具有背景图片、标题和副标题的滑块：演示

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