JSON şeması

InsigneSlider.create(target, spec), target'ın çocuklarını spec'ten oluşturulan slaytlarla değiştirir ve bir slider başlatır. Her ayar en üst düzeyde veya options altında verilebilir.

InsigneSlider.create(target: HTMLElement | string, spec: SliderSpec): InsigneSlider

SliderSpec

Alan	Tip	Açıklama
slides	(SlideSpec | string)[]	Zorunlu. Metin, { bg: metin } kısaltmasıdır.
options	Options	Ayarlar (en üst düzeyde de kabul edilir).
herhangi bir ayar		ör. effect, autoplay…

SlideSpec

Alan	Tip	Açıklama
bg	string | BgSpec	Arka plan görseli veya videosu.
layers	LayerSpec[]	Üstteki elemanlar, sırayla.
contentClass	string	Katmanları bu sınıfa sahip bir div ile sar (konumlandırma için).
html	string	Arka plandan sonra, katmanlardan önce eklenen güvenilir HTML.
className	string	Slayt elemanının sınıfı.
style	string | Record<string, string | number>	Satır içi stil (camelCase veya CSS adları, --custom property'ler).
attrs	Record<string, string>	Slayta ek attribute'lar.
kenBurns	string | boolean	Bu slayt için Ken Burns.

BgSpec

Alan	Tip	Varsayılan	Açıklama
src	string	—	Görsel URL'si (video: true ile video URL'si).
srcset, sizes	string	—	Responsive kaynaklar.
alt	string	""	Alternatif metin.
focus	string	"50% 50%"	Odak noktası.
safe	string	—	Güvenli alan "s ü g y".
fit	"smart" | "cover" | "contain"	smart	Fit modu.
video	boolean	false	Sessiz, döngülü bir <video> çiz.
poster	string	—	Video posteri (WebGL geçişlerinde de kullanılır).
lazy	boolean	false	data-src kullan (aktif slaytın yakınında yükle).

LayerSpec

Alan	Tip	Açıklama
tag	string	Eleman adı. Varsayılan div; href varsa a.
text	string	Yazı içeriği (güvenli: textContent).
html	string	Güvenilir HTML (text varsa yok sayılır).
href	string	Link hedefi.
className, style, attrs		Slaytlardaki gibi.
in, out, split, delay		Katman animasyonu (data-in, data-out, data-split, data-delay).
parallax	string | number	data-parallax.
children	LayerSpec[]	İç içe katmanlar.

Örnek

{
  "effect": "fade",
  "autoplay": 6000,
  "kenBurns": "alternate",
  "slides": [
    {
      "bg": { "src": "/img/salon.jpg", "alt": "Ana salon", "focus": "40% 35%" },
      "html": "<div class=\"golge\"></div>",
      "contentClass": "metin",
      "layers": [
        { "tag": "small", "text": "Sezon açılışı", "in": "fade" },
        { "tag": "h2", "text": "Açılış gecesi", "in": "lines-up" },
        { "tag": "a", "text": "Biletler", "href": "/biletler", "className": "btn", "in": "rise", "delay": 600 }
      ]
    },
    "/img/sahne.jpg"
  ]
}

Güvenlik

text, alt ve attribute'lardaki metinler yazı olarak eklenir, asla HTML olarak ayrıştırılmaz. Yalnızca html alanları ayrıştırılır; bunları asla kullanıcı girdisiyle doldurmayın.