HTML data attribute

CMS şablonları, sayfa oluşturucular ve tamamen kontrol etmediğiniz işaretleme için: bir konteynere data-insigne ekleyin ve data-* attribute'larla ayarlayın. JavaScript yazmanız gerekmez.

<div data-insigne data-effect="coverflow" data-slides-per-view="1.6" data-centered data-space-between="24" data-pagination-placement="outside" data-height="320">
  <div><img data-bg src="https://picsum.photos/id/1018/1200/800" alt="Mountains"></div>
  <div><img data-bg src="https://picsum.photos/id/1036/1200/800" alt="Snow"></div>
  <div><img data-bg src="https://picsum.photos/id/1043/1200/800" alt="City"></div>
  <div><img data-bg src="https://picsum.photos/id/1050/1200/800" alt="Sea"></div>
  <div><img data-bg src="https://picsum.photos/id/823/1200/800" alt="Forest"></div>
</div>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Nasıl başlar

CDN derlemesi InsigneSlider.autoInit() çağırır: sayfadaki her [data-insigne] elemanı DOM hazır olunca başlar, sonradan eklenenler de (SPA geçişleri, AJAX, sayfa oluşturucular) otomatik başlar.

npm paketiyle kendiniz çağırın:

import { autoInit } from 'insigne-slider';
autoInit();            // şimdi ve gelecekteki elemanlar için
// ya da: init(container) ile bir konteynerin içindeki [data-insigne] elemanlarını başlatın

Hangi elemanlar slider olabilir

Konteynere bir shadow root eklenir; bu yüzden şunlardan biri olmalı: div, section, article, main, aside, header, footer, nav, p, span, blockquote, h1–h6 veya bir custom element. ul olamaz; li benzeri çocukların etrafına bir div kullanın.

Ayarlar

Her ayar data- + kebab-case adıdır:

<div data-insigne
     data-effect="fade"
     data-autoplay="5000"
     data-pagination="fraction"
     data-breakpoints='{"768":{"effect":"cube"}}'>

Hepsini bir arada tutmak mı istiyorsunuz? JSON'u data-insigne'ın kendisine ya da bir <script type="application/json"> çocuğuna koyun:

<div data-insigne='{"effect":"fade","autoplay":5000}'> … </div>

<div data-insigne>
  <script type="application/json">{ "effect": "fade", "autoplay": 5000, "kenBurns": "alternate" }</script>
  <div><img data-bg src="a.jpg" alt=""></div>
  <div><img data-bg src="b.jpg" alt=""></div>
</div>

Öncelik, düşükten yükseğe: <script type="application/json"> → data-insigne JSON → tek tek data-* attribute'lar → JavaScript'te verilen ayarlar.

Örneğe ulaşmak

const slider = InsigneSlider.get('#galeri');  // eleman veya seçici
slider.goTo(3);

Slayt attribute'ları

Attribute	Nerede	Anlamı
data-bg	img, picture, video	Slaytın arka planı, smart fit ile yerleştirilir.
data-focus	arka plan veya slayt	Odak noktası "x% y%".
data-safe	arka plan veya slayt	Güvenli alan "sol üst gen yük" (görselin %'si).
data-fit	arka plan veya slayt	smart, cover, contain.
data-src, data-srcset	img, source, video	Lazy kaynaklar; aktif slaytın yakınında yüklenir.
data-ken-burns	slayt	Bu slayt için Ken Burns stili (veya false).
data-in, data-out, data-delay, data-split	herhangi bir eleman	Katman animasyonu. Bkz. katmanlar.
data-parallax, data-parallax-opacity, data-parallax-scale	herhangi bir eleman	Slayt hareket ederken kaydır / soldur / ölçekle.
data-ins-ignore	doğrudan çocuk	Slayt değil (konteynerde kalır).