gpu slider

Without a script

One file, and attributes in the HTML. For pages that have no bundler, and for people who write no script.

<link rel="stylesheet" href="…/gpuslider/dist/style.css">
<script type="module" src="…/gpuslider/dist/auto.js"></script>

<div class="gs" aria-label="Photos"
	data-gs='{ "loop": true, "autoplay": 4000 }'
	data-gs-canvas="stretch waves">
	<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>
	<button data-gs-prev aria-label="Previous slide">‹</button>
	<button data-gs-next aria-label="Next slide">›</button>
	<button data-gs-pause aria-label="Pause autoplay"></button>
	<div data-gs-dots></div>
</div>
Attribute
data-gsMakes the element a slider. Its value: the options of gpuslider/full as JSON, or nothing
data-gs-canvasThe canvas, with the effects that are named: "stretch waves", or with their options '{ "stretch": { "amount": 2 } }'. Drawn by WebGPU where the browser has it, by WebGL 2 where not
data-gs-gpu, data-gs-glThe same, by the one that is named or by the page
data-gs-lightboxA lightbox, drawn by the canvas of the slider, which it gives the slider if it has none. Needs dist/lightbox.css
data-gs-loadingA screen while the media load, with the options of loading() as JSON, or nothing. Needs dist/loading.css

auto.js is one file of 8.2 KB. The canvas and the lightbox are loaded when a slider asks for them and the page has time; a page without them never loads them.

The element tells when its slider is made: gs:ready, with the slider as detail, goes up to the document. For elements that come later, import { auto, sliders } from '…/auto.js' and call auto(); sliders.get( element ) is the slider.

Buttons anywhere

In the slider, attributes are all it takes (see Without a script of your own). Anywhere else, name the slider:

<div class="gs" id="photos">…</div>

<nav data-gs-for="photos">
	<button data-gs-prev>Back</button>
	<button data-gs-next>On</button>
	<button data-gs-to="0">First</button>
	<div data-gs-dots></div>
</nav>

or hand them over:

createSlider( element, {
	plugins: [ controls( { next: '.my-next', prev: document.querySelector( '.my-prev' ) } ) ],
} );

Arrows at an end are disabled, the dot and the data-gs-to of the active snap have aria-current. Buttons that are added later work too.