JavaScript & JSON

On existing markup

import { InsigneSlider } from 'insigne-slider'; // or window.InsigneSlider with the CDN build

const slider = new InsigneSlider('#hero', {
  effect: 'iris',
  loop: 'rewind',
  autoplay: 4000,
});

<div id="hero">
  <div><img data-bg src="https://picsum.photos/id/1011/1600/1000" alt="Canoe on a lake"></div>
  <div><img data-bg src="https://picsum.photos/id/1039/1600/1000" alt="Waterfall"></div>
  <div><img data-bg src="https://picsum.photos/id/1044/1600/1000" alt="Coast"></div>
</div>
<p><button id="prev">Prev</button> <button id="next">Next</button> <span id="out"></span></p>

<script type="module">
  const slider = new InsigneSlider('#hero', {
    effect: 'iris',
    loop: 'rewind',
    autoplay: 4000,
    arrows: 'hidden',
  });
  document.querySelector('#prev').onclick = () => slider.prev();
  document.querySelector('#next').onclick = () => slider.next();
  slider.on('change', ({ index }) => (document.querySelector('#out').textContent = `Slide ${index + 1} / ${slider.count}`));
</script>

Loading preview…

Live previewEdit in playground →

Calling new InsigneSlider() on an element that already has a slider returns the existing instance and applies the new options.

From data: InsigneSlider.create()

create() renders the slides from a spec and starts the slider. Text is set with textContent, so content from a CMS or an API is safe by default. Use html only for trusted markup.

<style>
  body { padding: 0; }
  .title { position: absolute; left: 6%; bottom: 16%; margin: 0; color: #fff; font-size: clamp(28px, 5vw, 56px); text-shadow: 0 2px 20px rgba(0,0,0,.35); }
  .sub { position: absolute; left: 6%; bottom: 9%; margin: 0; color: #fff; opacity: .9; }
</style>
<div id="hero"></div>

<script type="module">
  InsigneSlider.create('#hero', {
    effect: 'liquid',          // a WebGL effect: loaded only because it is used
    autoplay: 5000,
    slides: [
      {
        bg: { src: 'https://picsum.photos/id/1069/1800/1200', alt: 'Jellyfish', focus: '45% 40%' },
        layers: [
          { tag: 'h2', text: 'Built from JSON', className: 'title', in: 'chars-blur' },
          { tag: 'p', text: 'Text is set with textContent: safe for CMS data.', className: 'sub', in: 'rise', delay: 300 },
        ],
      },
      {
        bg: { src: 'https://picsum.photos/id/1050/1800/1200', alt: 'Sea' },
        layers: [{ tag: 'h2', text: 'One spec, any framework', className: 'title', in: 'zoom' }],
      },
    ],
  });
</script>

Loading preview…

Live previewEdit in playground →

The full spec — slides, backgrounds, layers, nesting — is in the JSON schema.

Controlling it

slider.next();
slider.prev();
slider.goTo(2, { instant: true });
slider.play();
slider.pause();
slider.update({ effect: 'cube', speed: 900 });   // keeps the current slide
slider.addSlide('<div><img data-bg src="new.jpg" alt=""></div>');
slider.removeSlide(0);
slider.destroy();                                // restores your markup

Read-only state: slider.index, slider.count, slider.slides, slider.options, slider.isPlaying, slider.isMoving. Full list: methods & properties.

Events

const off = slider.on('change', ({ index, previous, slide }) => { … });
slider.once('ready', () => { … });
off(); // unsubscribe

Loading preview…

Live previewEdit in playground →

Every event is also dispatched on the element as insigne:<name>, so you can listen without a reference to the instance.

Slides added by your framework

The slider watches its children. When your framework adds or removes slides, it refreshes on the next microtask and keeps the current slide when it still exists. You can force it with slider.refresh().