JSON schema

InsigneSlider.create(target, spec) replaces the children of target with slides built from spec and starts a slider. Any option can be placed at the top level or under options.

InsigneSlider.create(target: HTMLElement | string, spec: SliderSpec): InsigneSlider

SliderSpec

Field	Type	Description
slides	(SlideSpec | string)[]	Required. A string is shorthand for { bg: string }.
options	Options	Options (also accepted at the top level).
any option		e.g. effect, autoplay…

SlideSpec

Field	Type	Description
bg	string | BgSpec	Background image or video.
layers	LayerSpec[]	Elements on top, in order.
contentClass	string	Wrap the layers in a div with this class (for positioning).
html	string	Trusted HTML inserted after the background, before the layers.
className	string	Class of the slide element.
style	string | Record<string, string | number>	Inline style (camelCase or CSS names, --custom properties).
attrs	Record<string, string>	Extra attributes on the slide.
kenBurns	string | boolean	Ken Burns for this slide.

BgSpec

Field	Type	Default	Description
src	string	—	Image URL (video URL with video: true).
srcset, sizes	string	—	Responsive sources.
alt	string	""	Alternative text.
focus	string	"50% 50%"	Focal point.
safe	string	—	Safe area "l t w h".
fit	"smart" | "cover" | "contain"	smart	Fit mode.
video	boolean	false	Render a muted, looping <video>.
poster	string	—	Video poster (also used by WebGL transitions).
lazy	boolean	false	Use data-src (load near the active slide).

LayerSpec

Field	Type	Description
tag	string	Element name. Default div, or a when href is set.
text	string	Text content (safe: textContent).
html	string	Trusted HTML (ignored when text is set).
href	string	Link target.
className, style, attrs		As for slides.
in, out, split, delay		Layer animation (data-in, data-out, data-split, data-delay).
parallax	string | number	data-parallax.
children	LayerSpec[]	Nested layers.

Example

{
  "effect": "fade",
  "autoplay": 6000,
  "kenBurns": "alternate",
  "slides": [
    {
      "bg": { "src": "/img/hall.jpg", "alt": "Main hall", "focus": "40% 35%" },
      "html": "<div class=\"shade\"></div>",
      "contentClass": "copy",
      "layers": [
        { "tag": "small", "text": "Season opening", "in": "fade" },
        { "tag": "h2", "text": "Opening night", "in": "lines-up" },
        { "tag": "a", "text": "Tickets", "href": "/tickets", "className": "btn", "in": "rise", "delay": 600 }
      ]
    },
    "/img/stage.jpg"
  ]
}

Security

Strings in text, alt and attributes are inserted as text, never parsed as HTML. Only html fields are parsed — never fill them with user input.