README

Um componente Blade robusto e flexível para integração do Tiny Slider em aplicações Laravel.

Instalação

A maneira preferida de instalar esta extensão é através do [composer] composer.

Ou corre

$ composer require dynamikasolucoesweb/laravel-tiny-slider "*"

ou adicione

"dynamikasolucoesweb/laravel-tiny-slider": "*"

à seção require do seu arquivo composer.json.

Requisitos do Layout

Para que os assets (CSS e JS) sejam injetados corretamente, certifique-se de que seu arquivo de layout principal (ex: layouts/app.blade.php) contenha as pilhas (@stack) correspondentes: @stack('styles') @stack('scripts')

<head>
    @stack('styles')
</head>
<body>
    {{ $slot }}

    @stack('scripts')
</body>

Opções de Assets

Você pode usar o :cdn="true" no componente para começar a utiliza-lo. Ele utiliza o Cloudflare para entregar o CSS e o JS do Tiny Slider. Graças ao uso de @pushonce, esses arquivos são carregados apenas uma vez, mesmo que você utilize múltiplos sliders na mesma página.

Usando Assets Locais (Vite/NPM)

Se preferir gerenciar os assets localmente:

Instale a biblioteca:

npm install tiny-slider

No seu resources/js/app.js:

import { tns } from 'tiny-slider';
window.tns = tns;

No seu resources/css/app.css:

@import 'tiny-slider/dist/tiny-slider.css';

Uso Básico

Você pode carregar os assets via CDN, permitindo o uso imediato sem configurações adicionais de compilação.

<x-tiny-slider :options="['items' => 1, 'autoplay' => true]" :cdn="true">
    <div class="banner">
        <img src="banner1.jpg" alt="Slide 1">
    </div>
    <div class="banner">
        <img src="banner2.jpg" alt="Slide 2">
    </div>
</x-tiny-slider>

Opções do Componente

Atributo	Tipo	Descrição
options	array	Opções nativas do Tiny Slider (items, speed, mode, etc).
container	string	Tag HTML do container `default: div`
cdn	boolean	Se true, carrega assets via Cloudflare.
id	string	ID HTML customizado. Se omitido, um ID aleatório é gerado.
exportName	string	Nome da variável JS para acessar a instância do slider.
clientScript	string\JsExpression	Função JS callback executada após o init. `example: slider => console.log(slider)` `example: console.log(my_export)`

Exemplo Avançado

Simulando um carrossel de banners dinâmicos com scripts customizados:

<x-tiny-slider 
    :options="[
        'autoplay' => true,
        'controls' => false,
        'mouseDrag' => true,
        'items' => 1
    ]"
    exportName="meuSlider"
    clientScript="function(slider) { console.log('Slider ID:', slider.getInfo().container.id); }"
>
    @foreach($banners as $banner)
        <div class="item">
            <a href="{{ $banner->link }}">
                <img src="{{ $banner->image_url }}" alt="">
            </a>
        </div>
    @endforeach
</x-tiny-slider>

Authors

Giordani da Silveira dos Santos - giordani@dynamika.com.br

This project is under BSD-3-Clause license.

dynamikasolucoesweb / laravel-tiny-slider

Maintainers

Package info

Statistics

Security