Get started

gpu slider is not on npm yet. Until it is, npm run size in the repo builds dist/: the files for pages without a bundler.

The markup

A slider is an element with a track in it, and the slides are the children of the track. What is drawn on the canvas has the class gs-media; what is in gs-content stays HTML on top of it.

<div class="gs" aria-label="Photos">
	<div class="gs-track">
		<div class="gs-slide">
			<img class="gs-media" src="one.jpg" alt="…">
			<div class="gs-content">Anything: headings, links, buttons.</div>
		</div>
		<div class="gs-slide">
			<video class="gs-media" src="two.mp4" muted playsinline loop autoplay></video>
		</div>
	</div>
</div>

With what you name, and no more

import { createSlider } from 'gpuslider';
import { controls, keyboard } from 'gpuslider/plugins';
import 'gpuslider/style.css';

createSlider( element, { loop: true, plugins: [ controls(), keyboard() ] } );

The core moves slides: it measures, drags, snaps, loops, and says what happens. It is 4.6 KB. Everything else is a plugin, and what is not imported is not in the bundle: every entry has named exports only and no side effects.

With all options

import { createSlider } from 'gpuslider/full';
import { canvas } from 'gpuslider/canvas';
import { stretch, split } from 'gpuslider/effects';
import 'gpuslider/style.css';

const slider = createSlider( document.querySelector( '.gs' ), {
	loop: true,
	autoplay: 4000,
	plugins: [ canvas( { effects: [ stretch(), split() ] } ) ],
} );

gpuslider/full is the core with arrows, dots, keys, the wheel, videos, autoplay, auto height and the stack, switched by options: 7.0 KB.

Three tiers

Without the script the slider is a native scroller with scroll-snap. Without the canvas, or in a browser that has neither WebGPU nor WebGL 2, the page draws the slides and everything else works the same. With it the canvas draws the media, and the text stays HTML on top of it.