TypeScript

Types ship with the package (dist/types). No @types install.

import { InsigneSlider, type Options, type ChangeDetail, type SliderSpec } from 'insigne-slider';

const options: Options = { effect: 'fade', autoplay: 5000, breakpoints: { 768: { effect: 'cube' } } };
const slider = new InsigneSlider('#hero', options);

slider.on('change', (d: ChangeDetail) => {
  d.index;    // number
  d.previous; // number
  d.slide;    // HTMLElement
});

Exported types

Type	Description
Options	Options object accepted by the constructor, update() and create().
OptMeta	Metadata of one option (name, type, default, values, min, max, group).
EventName	'ready' | 'change' | 'movestart' | 'moveend' | 'resize' | 'autoplay' | 'refresh' | 'destroy'
ChangeDetail	{ index, previous, slide, slider }
SliderSpec, SlideSpec, LayerSpec, BgSpec	JSON schema types.

The element in JSX / templates

// global.d.ts — typed <insigne-slider> in TSX
import type { InsigneSliderElement } from 'insigne-slider';

declare global {
  interface HTMLElementTagNameMap {
    'insigne-slider': InsigneSliderElement;
  }
}

Placement math

smartFit(W, H, imageW, imageH, mode, focus, safe) returns { left, top, width, height, gaps } — the same function the slider uses. Handy for crop previews in a CMS:

import { smartFit, parseFocus, parseSafe } from 'insigne-slider';

const p = smartFit(375, 600, 1600, 900, 'smart', parseFocus('30% 40%'), parseSafe('10 15 40 70'));