Web component

<insigne-slider> is the most direct way to use the library: write HTML, set options as attributes, done. It works in plain HTML, server templates (Blade, Twig, Django, ERB), and inside React, Vue, Svelte or Angular templates.

<insigne-slider effect="cards" slides-per-view="1" pagination="fraction" pagination-placement="outside" height="360">
  <insigne-slide bg="https://picsum.photos/id/1025/1200/900" alt="Pug in a blanket" focus="50% 40%"></insigne-slide>
  <insigne-slide bg="https://picsum.photos/id/1074/1200/900" alt="Lioness" focus="45% 35%"></insigne-slide>
  <insigne-slide bg="https://picsum.photos/id/1084/1200/900" alt="Walruses"></insigne-slide>
  <insigne-slide bg="https://picsum.photos/id/1069/1200/900" alt="Jellyfish"></insigne-slide>
</insigne-slider>

Loading preview…

Live previewEdit in playground →

Slides

Every direct child is a slide, except <script>, <template>, <style>, elements with a slot attribute and elements with data-ins-ignore. Slides can be any element: <div>, <article>, <a>, <img>, or <insigne-slide>.

<insigne-slide> is a shorthand for a slide with a background image:

<insigne-slide bg="photo.jpg" alt="Description" focus="30% 40%" safe="20 10 50 80" fit="smart" lazy>
  <h2 data-in="lines-up">Optional content on top</h2>
</insigne-slide>

Attribute	Meaning
bg	Image URL. Creates an <img data-bg> inside the slide.
alt	Alternative text of that image (empty = decorative).
focus	Focal point, "x% y%". See images.
safe	Safe area, "left top width height" in % of the image.
fit	smart (default), cover or contain.
lazy	Load the image only when the slide is about to show.

Options as attributes

Every option from the reference is an attribute in kebab-case. Booleans can be written bare; objects are JSON.

<insigne-slider
  effect="coverflow"
  slides-per-view="3"
  centered
  loop="rewind"
  autoplay="4000"
  pause-on-hover
  breakpoints='{"0":{"slidesPerView":1.2},"700":{"slidesPerView":3}}'>

Changing an attribute later updates the slider in place, keeping the current slide:

document.querySelector('insigne-slider').setAttribute('effect', 'fade');

Options from JavaScript

const el = document.querySelector('insigne-slider');
el.options = { effect: 'cards', autoplay: 3000 }; // before or after it is ready

Methods and events on the element

el.next(); el.prev(); el.goTo(2); el.play(); el.pause();
el.index;  el.count;
el.slider;                  // the InsigneSlider instance (methods, events, options)
el.addEventListener('insigne:change', (e) => console.log(e.detail.index));

All events are listed in the events reference.

Registering under another name

With the npm package, call define() yourself — optionally with your own tag names:

import { define } from 'insigne-slider';
define('my-slider', 'my-slide');