Installation

CDN — one line

The ES module build registers <insigne-slider>, starts every [data-insigne] element (now and when added later) and exposes window.InsigneSlider. Optional chunks load from the same folder.

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

Need a classic script (no modules, older CMS)? The single-file build includes everything:

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

There is no stylesheet to add: styles ship inside the script.

npm

npm install insigne-slider

// Side-effect free: nothing runs until you call it.
import { InsigneSlider, define, init } from 'insigne-slider';

define();          // registers <insigne-slider> and <insigne-slide>
init();            // starts [data-insigne] elements already in the page
new InsigneSlider('#hero', { effect: 'fade' });

Or import the auto entry to get the CDN behavior:

import 'insigne-slider/auto';

Bundlers split WebGL, layers, particles and overlays into separate chunks automatically.

Self-hosting

Copy the dist/ folder to your server and point the script tag at insigne-slider.js. Keep the chunks/ folder next to it.

Browser support

Current Chrome, Edge, Firefox and Safari (desktop and mobile), i.e. browsers with Shadow DOM, custom elements, ResizeObserver and the Web Animations API. WebGL transitions fall back to CSS automatically when WebGL is unavailable.

Avoiding a flash before the script runs

Slides render as a plain stack until the script upgrades the element. If the script loads late, hide the extra slides:

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