Neden Insigne Slider
Bu alanda iki kütüphane öne çıkıyor. Swiper ücretsiz ve her yerde; Slider Revolution WordPress için premium görsel araç. Insigne Slider, ikisinde de aynı duvarlara çarptıktan sonra yazıldı.
Swiper'ın durduğu yer
| Eksik | Pratikte anlamı |
|---|---|
| Katman veya yazı animasyonu yok | Harf harf yükselen başlıklar, başlıktan sonra gelen butonlar için GSAP ya da slayt başına elle CSS gerekir. Swiper'da yalnızca data-swiper-parallax var. |
| Az efekt | slide, fade, cube, coverflow, flip, cards, creative. Shader geçişleri ayrıca satılıyor. |
| Loop DOM'u yeniden sıralar | Loop modu slaytları taşır. Az slaytla veya birden fazla görünümde boşluklar oluşur; framework'ler düğümlerini kaybeder. |
| Responsive elle yapılır | Kırılımlar varsayılan olarak pencere genişliğine göre ve her boyut elle yazılır. |
| Arka planlar kırpılır | Odak noktası veya güvenli alan yok. object-fit: cover telefonda özneyi keser. |
| Yükseklik zıplar | autoHeight sonradan animasyon yapar ve sayfa kayması (CLS) oluşturur. |
Slider Revolution'ın durduğu yer
| Eksik | Pratikte anlamı |
|---|---|
| Yalnızca WordPress, site başı ücretli | Düz HTML, React veya Vue projelerinde kullanılamaz. |
| Ağır | Demo sayfaları ~160 KB çekirdek, ~80 KB GSAP araçları ve jQuery yüklüyor (sıkıştırılmamış). |
| Yalnızca editör | Slaytlar görsel editörde düzenlenen kapalı bir JSON'da; gerçek bir kod API'si ve sürüm kontrolü yok. |
| Elle beş düzen | Her katman beş cihaz boyutu için ayrı ayrı konumlandırılır. |
| Arka planlar CSS | background-image: alt metin yok, zayıf lazy loading, kırpma yalnızca background-position ile. |
Insigne neyi farklı yapar
- Tek motor, üç API, aynı ayar adlarıyla: component,
data-*, JS/JSON. - Ayarsız responsive: konteyner tabanlı, yükseklik görselden, sütunlar
minSlideWidth'ten. - Smart fit: odak noktası + güvenli alan, yalnızca gerektiğinde bulanık dolguyla uzaklaşma, hiç kırpmamak için
height: "image". WebGL geçişleri aynı yerleşimi kullanır. - Veri olarak katmanlar: bölünmüş yazı, stagger ve maskeli reçeteler; Web Animations API ile oynatılır (≈9 KB, gerektiğinde yüklenir).
- WebGL dahil, WebGL veya CORS yoksa CSS'e düşer.
- Kopyasız loop ve sürüklenebilen her efekt.
- Varsayılan erişilebilir: roller, canlı bölge, ekran dışı slaytlar inert, klavye, duraklat butonu, hareket azaltma.
Ölçülen boyutlar
gzip, 19 Ekim 2026'da yayınlanan dosyalardan ölçüldü.
| Paket | Boyut | İçerik |
|---|---|---|
Swiper 14.3.0 swiper-bundle.min.js + CSS | 46,0 KB | tüm modüller |
Swiper 14.3.0 swiper.min.js | 19,9 KB | yalnızca çekirdek: navigasyon, sayfalama, autoplay, efekt yok |
| Insigne çekirdek | 44,6 KB | navigasyon, sayfalama, autoplay, a11y, 27 efekt, smart fit, component, data-*, JSON, CSS |
+ katmanlar (yalnızca data-in varsa) | +8,8 KB | 22 yazı + 8 görsel reçetesi |
| + WebGL (yalnızca WebGL efektinde) | +7,9 KB | 13 shader |
| Insigne tek dosya | 66,5 KB | her şey, klasik <script> için |