gpu slider

React

Two components, and a hook for markup of your own. React renders the slides, the library moves them.

import { Slider, Slide } from 'gpuslider/react';
import { controls } from 'gpuslider/plugins';
import { canvas } from 'gpuslider/canvas';
import { stretch } from 'gpuslider/effects';
import 'gpuslider/style.css';

function Photos( { photos, loop } ) {
	return (
		<Slider
			loop={ loop }
			plugins={ [ controls(), canvas( { effects: [ stretch() ] } ) ] }
			onChange={ ( index ) => console.log( index ) }
			aria-label="Photos"
		>
			{ photos.map( ( photo ) => (
				<Slide key={ photo.src }>
					<img className="gs-media" { ...photo } />
				</Slide>
			) ) }
		</Slider>
	);
}

<Slider> is the element of the slider with its track, <Slide> a slide. Slides that React adds or removes are seen by the slider.

Prop of <Slider>
loop, align, axis, free, duration and the other options of the coreA change of one changes the slider that exists
pluginsRead when the slider is made. Written in the JSX they cost nothing: they are not what it is made again for
remakeA list, as the dependencies of an effect: the slider is made again when one of them changes, and stays at its slide. For other plugins or effects
indexThe snap to be at. The slider goes there when it changes
onChange, onSettle( index, slider )
onListeners for every other event, by its name: { 'lightbox:open': … }
onSliderIs given the slider when it is made, and null when it ends
aroundWhat is in the slider beside its slides: arrows of your own, a caption
asIts element, div when nothing is said. <Slide> has it too
className, style, id, aria-label and every other attributeOf its element. className="gs-stack" for a stack

How many slides are in view and how far they are apart is CSS here as everywhere, see Layout is CSS: --gs-per-view and --gs-gap in a class or in style.

A component in a <Slider> has the slider by useSliderContext(), and is rendered again when the slider goes to another snap:

import { useSliderContext } from 'gpuslider/react';

function Next() {
	const slider = useSliderContext();
	return (
		<button disabled={ ! slider?.canNext } onClick={ () => slider.next() }>
			On
		</button>
	);
}

<Slider around={ <Next /> }>…</Slider>

With markup of your own there is the hook the components are made of:

import { useSlider } from 'gpuslider/react';

const [ ref, slider ] = useSlider( { loop, plugins: [ controls() ] }, [ loop ] );

<div className="gs" ref={ ref }>
	<div className="gs-track">…</div>
</div>

Its second argument is what the slider is made again for.

The components add 0.6 KB to the core, the hook alone 0.1 KB. The page above without the canvas is 5.7 KB in the bundle, arrows and dots in it; with the canvas and stretch it is 12.5 KB.