Üç giriş yolu. Tek dil.
Web component yazın, düz HTML'i data attribute'larla süsleyin ya da CMS'inizden gelen JSON'u verin. Ayar adları her yerde aynı; bir kez öğrendiğiniz her teknolojide çalışır.
<insigne-slider effect="fade" autoplay="5000" ken-burns>
<insigne-slide bg="salon.jpg" alt="Ana salon" focus="40% 35%">
<h2 data-in="lines-up">Açılış gecesi</h2>
</insigne-slide>
<insigne-slide bg="sahne.jpg" alt="Sahne"></insigne-slide>
</insigne-slider><div data-insigne data-effect="fade" data-autoplay="5000" data-ken-burns>
<div>
<img data-bg src="salon.jpg" alt="Ana salon" data-focus="40% 35%">
<h2 data-in="lines-up">Açılış gecesi</h2>
</div>
<div><img data-bg src="sahne.jpg" alt="Sahne"></div>
</div>import { InsigneSlider } from 'insigne-slider';
InsigneSlider.create('#hero', {
effect: 'fade',
autoplay: 5000,
kenBurns: true,
slides: [
{ bg: { src: 'salon.jpg', alt: 'Ana salon', focus: '40% 35%' },
layers: [{ tag: 'h2', text: 'Açılış gecesi', in: 'lines-up' }] },
{ bg: { src: 'sahne.jpg', alt: 'Sahne' } },
],
});Özne kadrajda kalır.
Diğer slider'lar arka planı ortalar ve şansa bırakır. Bir odak noktası ya da güvenli alan işaretleyin, Insigne onu her oranda görünür tutar; yalnızca gerektiğinde uzaklaşır ve boşluğu bulanık kopyayla doldurur. Oranı sürükleyin.
Zamanlaması olan tipografi.
Editör olmadan Slider Revolution seviyesinde girişler: herhangi bir elemana data-in ekleyin. Yazı satır, kelime veya harf olarak bölünür; her reçete ayarlayabileceğiniz ya da değiştirebileceğiniz bir veridir.
Eklenti gibi değil, ürün gibi yapıldı.
Yalnızca eksik olduklarında fark edilen parçalar.
Parmağı izler
Sürekli pozisyon modeli: cube, flip, maskeler, WebGL dahil her efekt sürüklemeyle ilerler ve parmağın hızıyla bırakılır.
Konteynere göre responsive
Kırılımlar slider'ın kendi genişliğine bakar. minSlideWidth sütun sayısını seçer, yükseklik görseli izler.
Gerçek görseller
Arka planlar <img> ve <picture> olarak kalır: alt metin, srcset, lazy loading, kayma yok.
Kullandığını yükler
WebGL, katmanlar, parçacıklar ve overlay'ler ayrı parçalar; yalnızca bir slider istediğinde indirilir.
Varsayılan erişilebilir
Carousel rolleri, canlı bölge, ekran dışı slaytlar inert, klavye, duraklat butonu, hareket azaltma.
Framework dostu
Slaytlar sizin DOM'unuzda kalır (slot ile yansıtılır); React, Vue ve Svelte kendi düğümlerinin sahibi olmaya devam eder.
İddia değil, ölçüm.
Boyutlar gzip; 19 Ekim 2026'da yayınlanan dosyalardan ölçüldü (Swiper 14.3.0).
| Insigne Slider | Swiper | Slider Revolution | |
|---|---|---|---|
| Fiyat | Ücretsiz, görünür atıf | Ücretsiz (MIT) | Ücretli, site başına |
| Çalıştığı yer | Her site, her framework | Her site | Yalnızca WordPress |
| JS + CSS, tüm özellikler | 45 KB çekirdek (kullanılırsa +9 KB katman, +8 KB WebGL) | 46 KB paket | ~240 KB sıkıştırılmamış (çekirdek + GSAP) + jQuery |
| Katman / yazı animasyonu | 30 reçete, bölünmüş yazı | Yalnızca parallax | Editör |
| WebGL geçişler | 13, ücretsiz | Ücretli (ayrı ürünler) | Eklenti |
| Odak noktası ve güvenli alan | Var | Yok | background-position |
| Kırılımsız responsive | Var | Elle kırılım | Elle 5 cihaz düzeni |
| Kopyasız loop | Var | DOM'u yeniden sıralar | Var |
| HTML / JSON / JS ile ayar | Üçü de | JS, element attribute | Editör JSON |