Options, API and events · Docs

Options

Of the core:

Option	Default
`perView`	from CSS	Slides per view, fractions allowed; `'auto'` takes each slide's own width
`gap`	from CSS	px
`axis`	`'x'`	`'y'`: downwards
`loop`	`false`	Needs more slides than fit in the view, plus one
`align`	`'start'`	`'center'`, `'end'`
`group`	`1`	Slides per step
`contain`	`true`	No empty space at the ends
`free`	`false`	Rest anywhere, glide on after a drag
`duration`	`600`	ms of a move
`ease`		curve of a move to a slide, `u => …` from 0 to 1 in `duration`, instead of the spring; a drag let go keeps the spring
`start`	`0`	First slide
`drag`	`true`
`on`		Listeners by the name of their event: `{ change: ( index ) => … }`
`plugins`	`[]`	See Plugins that come with it

Of gpuslider/full, and of data-gs, also:

Option	Default	Is the plugin
`mode`	`'row'`	`'stack'`: `stack()`
`autoHeight`	`false`	`autoHeight()`
`autoplay`	`0`	ms per slide: `autoplay()`
`keyboard`, `wheel`	`true`	`keyboard()`, `wheel()`
`prev`, `next`, `pause`, `dots`		Controls anywhere on the page: an element, several, or a selector

`next()`, `prev()`
`to( index, { instant } )`	To a snap
`toSlide( index, { instant } )`	To the snap of a slide, when a snap has several
`index`, `previous`, `count()`	Snaps
`canNext`, `canPrev`	Whether there is a snap to go to
`progress`	0 to 1 through the slides
`visible()`	Indexes of the slides in view
`resting`	Nothing moves, nothing is drawn
`set( options )`	Changes options of the slider that exists
`update()`	Measures again, after a change the slider cannot see
`use( plugin )`	Adds a plugin later
`plugins`	The plugins by their name: `slider.plugins.lightbox.open( 2 )`
`on( name, fn )`, `once( name, fn )`	Both return a function that removes the listener
`off( name, fn )`, `emit( name, detail )`
`grab()`, `drag( position )`, `release( velocity )`	Move it as a pointer does
`shift( by, push )`	Moves it and where it is going by the same distance; as a push it counts as speed
`wake()`	Asks for a frame
`root`, `track`, `slides`, `options`, `layout()`, `motion`, `view`, `win`, `signal`	For plugins. `signal` ends with the slider: what listens with it needs no removing
`destroy()`	Gives the page back as it was

Slides that are added to the track or removed from it are seen by the slider: render them with whatever renders your page.

Listeners get what the event says, then the slider.

slider.on( 'change', ( index, slider ) => {} );
slider.on( '*', ( name, detail, slider ) => {} );

Event	Says
`ready`	The slider. After the listeners that are added right after `createSlider()`
`change`	Index of the snap the slider goes to
`settle`	Index of the snap it came to rest at. Also after the slider was measured, when it has not moved
`visible`	Indexes of the slides in view, when they change
`dragstart`, `dragend`	The motion; the velocity it was let go with
`click`	`{ index, event }`. Not the click that ends a drag; a drag of 10 px or less is a click, as a hand that clicks moves a little. A click on a slider that moves holds it, and is a click on the slide under it. The slide is the one that is seen: see Effects
`measure`	The layout, after every measuring
`slides`	The slides, after some were added or removed
`frame`	The view, on every frame of a move
`destroy`	The slider
`autoplay:play`, `autoplay:pause`
`autoplay:run`, `autoplay:wait`	`{ delay, left }` when the time of a slide begins to run, `left` of `delay`; nothing when it stops before its end
`marquee:play`, `marquee:pause`
`canvas:ready`	`canvas()` has chosen its layer: `'gpu'` or `'gl'`
`gpu:on`, `gpu:off`, `gl:on`, `gl:off`	The canvas took over, or gave the slides back to the page
`loading:start`, `loading:progress`, `loading:done`	`loading()`: how many media there are, how many of them are there, and that all are
`lightbox:open`, `lightbox:close`	Index of the slide

Whether the slider is at an end: canNext and canPrev, at change.