Hızlı başlangıç

1. Script'i ekleyin

<script type="module" src="https://slider.sadiksefa.com.tr/dist/insigne-slider.js"></script>

2. Görsellerinizi sarın

<insigne-slider> içindeki her doğrudan çocuk bir slayttır. Düz görseller yeterli:

<insigne-slider autoplay="5000" aria-label="Gallery">
  <img src="https://picsum.photos/id/1015/1600/1000" alt="Fjord">
  <img src="https://picsum.photos/id/1039/1600/1000" alt="Waterfall">
  <img src="https://picsum.photos/id/1044/1600/1000" alt="Coast">
</insigne-slider>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Bu, eksiksiz, responsive ve erişilebilir bir slider: kaydırma, klavye, noktalar, duraklat butonlu otomatik oynatma ve görsel oranını izleyen bir yükseklik.

3. Slayta içerik koyun

Arka planı data-bg ile işaretleyin, üstüne istediğiniz HTML'i ekleyin. data-in, slaytı aktif olunca elemanı canlandırır:

<insigne-slider effect="fade" autoplay="6000">
  <div>
    <img data-bg src="salon.jpg" alt="Ana salon" data-focus="40% 35%">
    <h2 data-in="chars-up">Açılış gecesi</h2>
    <p data-in="rise">Kapılar sekizde açılıyor.</p>
  </div>
  <div>
    <img data-bg src="sahne.jpg" alt="Sahne">
    <h2 data-in="lines-up">Program</h2>
  </div>
</insigne-slider>

data-focus, görselin kadrajda kalması gereken noktasıdır; slider onu hiçbir ekranda kırpmaz.

4. Davranışı attribute'larla değiştirin

Her ayar kebab-case bir attribute'tur:

<insigne-slider effect="cube" loop="rewind" pagination="fraction" arrows="visible" ken-burns>

Aynı ayarlar herhangi bir <div data-insigne> üzerinde data-* olarak ya da bir JS nesnesi olarak çalışır. Bkz. ayarlar referansı.

Sonra

• Basitten gelişmişe: adım adım tam bir hero yapın.
• Şablonlar: hazır bir tasarımı kopyalayın.
• Playground: her şeyi canlı deneyin.