HTML data attributes

For CMS templates, page builders and markup you do not fully control: add data-insigne to a container and configure it with data-* attributes. No JavaScript to write.

<div data-insigne data-effect="coverflow" data-slides-per-view="1.6" data-centered data-space-between="24" data-pagination-placement="outside" data-height="320">
  <div><img data-bg src="https://picsum.photos/id/1018/1200/800" alt="Mountains"></div>
  <div><img data-bg src="https://picsum.photos/id/1036/1200/800" alt="Snow"></div>
  <div><img data-bg src="https://picsum.photos/id/1043/1200/800" alt="City"></div>
  <div><img data-bg src="https://picsum.photos/id/1050/1200/800" alt="Sea"></div>
  <div><img data-bg src="https://picsum.photos/id/823/1200/800" alt="Forest"></div>
</div>

Loading preview…

Live previewEdit in playground →

How it starts

The CDN build calls InsigneSlider.autoInit(): every [data-insigne] element in the page starts when the DOM is ready, and elements added later (SPA navigation, AJAX, page builders) start automatically too.

With the npm package, call it yourself:

import { autoInit } from 'insigne-slider';
autoInit();            // now and for future elements
// or: init(container) to start the [data-insigne] elements inside one container

Which elements can host a slider

The container gets a shadow root, so it must be one of: div, section, article, main, aside, header, footer, nav, p, span, blockquote, h1–h6 or a custom element. Not ul — use a div around li-like children.

Options

Every option is data- + its kebab-case name:

<div data-insigne
     data-effect="fade"
     data-autoplay="5000"
     data-pagination="fraction"
     data-breakpoints='{"768":{"effect":"cube"}}'>

Prefer to keep them together? Put JSON in data-insigne itself, or in a <script type="application/json"> child:

<div data-insigne='{"effect":"fade","autoplay":5000}'> … </div>

<div data-insigne>
  <script type="application/json">{ "effect": "fade", "autoplay": 5000, "kenBurns": "alternate" }</script>
  <div><img data-bg src="a.jpg" alt=""></div>
  <div><img data-bg src="b.jpg" alt=""></div>
</div>

Precedence, lowest to highest: <script type="application/json"> → data-insigne JSON → individual data-* attributes → options passed in JavaScript.

Reaching the instance

const slider = InsigneSlider.get('#gallery');  // element or selector
slider.goTo(3);

Slide attributes

Attribute	On	Meaning
data-bg	img, picture, video	The slide background, placed by smart fit.
data-focus	background or slide	Focal point "x% y%".
data-safe	background or slide	Safe area "l t w h" (% of the image).
data-fit	background or slide	smart, cover, contain.
data-src, data-srcset	img, source, video	Lazy sources, loaded near the active slide.
data-ken-burns	slide	Ken Burns style for this slide (or false).
data-in, data-out, data-delay, data-split	any element	Layer animation. See layers.
data-parallax, data-parallax-opacity, data-parallax-scale	any element	Move / fade / scale while the slide travels.
data-ins-ignore	direct child	Not a slide (stays in the container).