Plugins · Docs · gpu slider

The core moves slides. Arrows, keys, autoplay, a ticker, thumbnails and all else are plugins: the ones that come with it, and the ones you write.

That come with it

From gpuslider/plugins. Each is 0.3 to 1 KB.

Plugin
`controls( { prev, next, dots } )`	Arrows, dots and `data-gs-to` buttons, in the slider or anywhere
`keyboard()`	Arrow keys, Home, End. Makes the slider focusable
`wheel()`	The wheel and two fingers on a trackpad, along the slider
`autoplay( 3500 )`	Goes on by itself. Waits for the pointer, the focus, the tab and the screen; `{ delay, hover: false }` does not wait for the pointer, `{ delay, left }` gives the first slide less time, for a slider made again that goes on where it was. `slider.plugins.autoplay.pause()`, `.play()`, `.paused`
`marquee( { speed, hover, scroll } )`	A ticker: runs evenly and without an end, slower under the pointer, faster while the page is scrolled. For `loop: true`
`thumbs( other )`	The slides are the buttons of another slider
`videos()`	Videos play while their slide is in view. One that says `preload="none"` is loaded when its slide comes into view, not before
`autoHeight()`	As high as the slides in view; the height follows the move
`stack()`	The slides on top of each other, for transitions. The images of the slide that is shown come first: with `loading="lazy"` the ones next to it wait for them, the others until they are next
`progress()`	Tells the slides where they are, for animations in CSS
`loading( { screen, min, timeout, also } )`	A screen while the media load, and events that say how far they are

And canvas() from gpuslider/canvas, lightbox() from gpuslider/lightbox.

import { marquee, thumbs } from 'gpuslider/plugins';

// A ticker whose pictures stretch while the page is scrolled.
createSlider( one, {
	loop: true,
	free: true,
	plugins: [ marquee( { speed: 50, hover: 0.2, scroll: 0.4 } ), canvas( { effects: [ stretch() ] } ) ],
} );

// Photos with thumbnails.
const photos = createSlider( two, { plugins: [ controls() ] } );
createSlider( three, { plugins: [ thumbs( photos ) ] } );

Your own

A plugin is a function that gets the slider and returns an object. Every member is optional.

const counter = ( { every = 1 } = {} ) => ( slider ) => {
	let changes = 0;
	const off = slider.on( 'change', () => {
		if ( ++changes % every === 0 ) {
			slider.emit( 'counter:count', changes );
		}
	} );
	return {
		name: 'counter',            // slider.plugins.counter
		layout( measured ) {},      // may change what was measured, before it is used
		measure( view ) {},         // after every layout
		slides() {},                // slides were added or removed
		frame( view, dt, now ) {},  // every frame while something moves
		busy: () => false,          // true asks for another frame
		destroy: off,
		get changes() {             // and whatever else it has to offer
			return changes;
		},
	};
};

const slider = createSlider( element, { plugins: [ counter( { every: 2 } ) ] } );
slider.on( 'counter:count', ( changes ) => {} );

view.places[ i ] says where slide i is: x in px, p in slides from its resting place, share of it in view, visible.

Animations

On the canvas an animation is an effect: coverflow() turns the slides beside the active one.

On the page it is CSS. The progress plugin writes --gs-p (-1 is one slide before the active one), --gs-away (the same without the sign) and --gs-share on every slide, on every frame of a move:

import { progress } from 'gpuslider/plugins';

createSlider( element, { align: 'center', plugins: [ progress() ] } );

.gs-slide { perspective: 1200px; }
.gs-slide > * {
	rotate: y calc( var(--gs-p) * -45deg );
	scale: calc( 1 - var(--gs-away) * 0.2 );
}

Transform what is in the slide, not the slide: that one the slider moves and measures.