Markup & attributes

Elements

Element	Description
<insigne-slider>	The slider. Every option is an attribute in kebab-case (slides-per-view). data--prefixed names work too.
<insigne-slide>	Optional slide element with background shorthands (below). Any element can be a slide.
[data-insigne]	Turns any div, section, article, header, main, aside, nav, footer into a slider. Options as data-*. data-insigne='{…}' may hold JSON.
<script type="application/json">	Direct child of a slider: options as JSON.

<insigne-slide> attributes

Attribute	Type	Description
bg	URL	Background image (creates <img data-bg>).
alt	string	Alt text of the background.
focus	"x% y%"	Focal point.
safe	"l t w h"	Safe area in % of the image.
fit	smart | cover | contain	Fit mode.
lazy	boolean	Load the image near the active slide only.

Slide-level attributes

Attribute	On	Type	Description
data-bg	img, picture, video (direct child of a slide)	flag	Marks the background.
data-focus	background or slide	"x% y%" or keywords	Focal point (default from the focus option).
data-safe	background or slide	"l t w h"	Safe area.
data-fit	background or slide	smart | cover | contain	Fit mode.
data-src, data-srcset	img, source, video	URL / srcset	Lazy sources.
data-ken-burns	slide	style or false	Ken Burns for this slide.
data-ins-ignore	direct child	flag	Not a slide.
slot	direct child	any	Not a slide (reserved for future named slots).

Layer attributes

Attribute	Type	Description
data-in	recipe name	Entrance when the slide becomes active. Empty = layerIn option (or rise).
data-out	reverse | none | fade | up | down | left | blur	Exit when the slide leaves. Default: layerOut option (reverse).
data-delay	ms	Start time. Default: 110 ms after the previous layer.
data-split	lines | words | chars | none	How to split the text.
data-parallax	px or %	Horizontal offset while the slide travels (-30%, 120).
data-parallax-opacity	0–1	Opacity when the slide is one step away.
data-parallax-scale	number	Scale when the slide is one step away.

State the slider adds

On	Attribute / class	Meaning
slider element	data-ins-ready	Started.
slider element	data-ins-motion="pending" | "on"	Layer engine loading / active.
slider element	data-ins-fill	height: "fill".
slider element	data-ins-depth	Scroll depth active.
slide	.ins-slide, .is-active, .is-prev, .is-next, .has-bg	State classes.
slide	role="group", aria-roledescription, aria-label, inert	Accessibility.
background	.ins-bg + inline position	Smart fit placement.

destroy() removes all of these.