Giriş
Insigne Slider, her web sitesi için bir slider ve karusel kütüphanesidir. Küçüktür, her ekranda doğru görünmek için ayar gerektirmez, fotoğraflarınızın öznesini kadrajda tutar ve genelde ücretli eklentilerde bulunan katman animasyonlarını ve WebGL geçişlerini getirir.
Neler sunar
- Üç kullanım yolu, tek dil. Web component (
<insigne-slider>),data-*attribute'lu düz HTML ya da JavaScript / JSON. Her ayarın adı üçünde de aynıdır. - Kırılım yazmadan responsive. Yükseklik görsel oranını izler (telefonda biraz daha dik), sütun sayısını
minSlideWidthbelirler; kırılım istediğinizde pencereye değil slider'ın genişliğine bakar. - Arka plan görselleri için smart fit. Odak noktası ve güvenli alan, yüzleri ve ürünleri her en-boy oranında görünür tutar. Arka planlar gerçek
<img>/<picture>olarak kalır: alt metin,srcset, lazy loading. - Katmanlar ve tipografi. Herhangi bir elemana
data-in="chars-up". Yazıyı satır, kelime veya harf olarak bölün; 30 hazır reçete ve kendi reçeteleriniz. - 40 geçiş. 27 CSS efekti (fade, cube, coverflow, cards, maskeler, glitch…) ve 13 WebGL shader; hepsi sürüklenebilir.
- Küçük. Navigasyon, otomatik oynatma, erişilebilirlik ve tüm CSS efektleriyle çekirdek 45 KB gzip. WebGL, katmanlar, parçacıklar ve overlay'ler yalnızca bir slider kullandığında yüklenir.
Tek paragrafta nasıl çalışır
Her slider kendi görüntü alanını, oklarını, sayfalamasını ve atfını kapalı bir shadow root içinde çizer ve slaytlarınızı bir <slot> ile oraya yansıtır. Slaytlarınız DOM'da hiç yer değiştirmez; framework'ler sahipliklerini korur. Her slayt tek bir sürekli sayıdan konumlanır: her efektin parmağı izlemesinin ve loop modunun kopya slayt gerektirmemesinin sebebi budur.
Sırada ne var
- Yeni misiniz? Hızlı başlangıç ile başlayın.
- Üç API arasında mı seçiyorsunuz? Web component, data attribute ve JavaScript ve JSON sayfalarını okuyun.
- Başka bir kütüphaneden mi geliyorsunuz? Swiper'dan geçiş veya Slider Revolution'dan geçiş.
- Bir ayar mı arıyorsunuz? Ayarlar referansı aranabilir.
Tek satırda lisans
Ticari projeler dahil her kullanım için ücretsiz; tek şart küçük "Slider by sadiksefa.dev" atfının görünür kalması — ya da sayfanın başka bir yerinde sadiksefa.dev linki olması. Ayrıntılar.