Kurulum

CDN — tek satır

ES module derlemesi <insigne-slider> elemanını kaydeder, her [data-insigne] elemanını başlatır (şimdi ve sonradan eklenenleri) ve window.InsigneSlider'ı tanımlar. İsteğe bağlı parçalar aynı klasörden yüklenir.

<script type="module" src="https://slider.sadiksefa.com.tr/dist/insigne-slider.js"></script>

Klasik bir script mi gerekiyor (module yok, eski CMS)? Tek dosyalık derleme her şeyi içerir:

<script src="https://slider.sadiksefa.com.tr/dist/insigne-slider.iife.js" defer></script>

Eklenecek ayrı bir stil dosyası yok: stiller script'in içinde.

npm

npm install insigne-slider

// Yan etkisiz: siz çağırana kadar hiçbir şey çalışmaz.
import { InsigneSlider, define, init } from 'insigne-slider';

define();          // <insigne-slider> ve <insigne-slide> elemanlarını kaydeder
init();            // sayfadaki [data-insigne] elemanlarını başlatır
new InsigneSlider('#hero', { effect: 'fade' });

Ya da CDN davranışı için auto girişini içe aktarın:

import 'insigne-slider/auto';

Bundler'lar WebGL, katman, parçacık ve overlay'leri otomatik olarak ayrı parçalara böler.

Kendi sunucunuzda barındırma

dist/ klasörünü sunucunuza kopyalayın ve script etiketini insigne-slider.js dosyasına yönlendirin. chunks/ klasörü yanında kalmalı.

Tarayıcı desteği

Güncel Chrome, Edge, Firefox ve Safari (masaüstü ve mobil); yani Shadow DOM, custom element, ResizeObserver ve Web Animations API destekleyen tarayıcılar. WebGL yoksa geçişler otomatik olarak CSS'e düşer.

Script çalışmadan önceki titremeyi önlemek

Script elemanı yükseltene kadar slaytlar alt alta görünür. Script geç yükleniyorsa fazla slaytları gizleyin:

insigne-slider:not(:defined) > :not(:first-child),
[data-insigne]:not([data-ins-ready]) > :not(:first-child):not(script) { display: none; }