gpu slider

Playground

Every slider the library can be, and the settings for all of it beside them. Drag, swipe, scroll sideways, use the arrow keys. Click a slide for the lightbox.

One per view

Images and a video. The text is HTML on top of the canvas. One slide at a time takes the transition that is chosen in the settings, or another every time: drag slowly to stop half way. With none, the slides move.

A woman in sunglasses between neon letters

Own motion

A spring, solved exactly on every frame.

Video

Plays while its slide is in view, with the same effects.

The silhouette of a man with a guitar in front of laser rays

No dependency

The core is 4.7 KB. All else is asked for.

A couple in an arcade, looking at the camera

Idle is free

No frame is drawn while nothing moves.

Several per view

Slides per view and gap are CSS custom properties: set them under Slider.

A woman in sunglasses between neon letters
The silhouette of a man with a guitar in front of laser rays
A man with words projected in red on his face
A couple in an arcade, looking at the camera
A woman in a white top, lightning projected on her
A man kneeling by a boombox in front of neon signs
Bark of a tree beside lava that has cooled, still glowing in its cracks
A woman laughing in blue light, a stripe of warm light over her face

Ticker

Runs by itself and without an end, slower under the pointer. Scroll the page: it runs faster, and the images give way to the speed. Drag it, and it runs on.

A woman laughing in blue light, a stripe of warm light over her face
A man kneeling by a boombox in front of neon signs
A couple in an arcade, looking at the camera
The silhouette of a man with a guitar in front of laser rays
Bark of a tree beside lava that has cooled, still glowing in its cracks
A woman in a white top, lightning projected on her
A man with words projected in red on his face
A woman in sunglasses between neon letters

With thumbnails

Two sliders: the slides of the small one are the buttons of the large one.

A man with words projected in red on his face
A woman in a white top, lightning projected on her
Bark of a tree beside lava that has cooled, still glowing in its cracks
A woman in sunglasses between neon letters
A woman laughing in blue light, a stripe of warm light over her face
The silhouette of a man with a guitar in front of laser rays
A man kneeling by a boombox in front of neon signs
A couple in an arcade, looking at the camera

A man with words projected in red on his face
A woman in a white top, lightning projected on her
Bark of a tree beside lava that has cooled, still glowing in its cracks
A woman in sunglasses between neon letters
A woman laughing in blue light, a stripe of warm light over her face
The silhouette of a man with a guitar in front of laser rays
A man kneeling by a boombox in front of neon signs
A couple in an arcade, looking at the camera

Downwards, and in rows

The same slider with its slides below each other, the one that is shown in the middle: it runs by itself, and can be dragged up and down, or moved with the keys. And two rows, which are a grid of CSS and nothing of the script.

A man kneeling by a boombox in front of neon signs
A woman in sunglasses between neon letters
A couple in an arcade, looking at the camera
Bark of a tree beside lava that has cooled, still glowing in its cracks
The silhouette of a man with a guitar in front of laser rays

A woman in sunglasses between neon letters
The silhouette of a man with a guitar in front of laser rays
A man with words projected in red on his face
A couple in an arcade, looking at the camera
A woman in a white top, lightning projected on her
A man kneeling by a boombox in front of neon signs
Bark of a tree beside lava that has cooled, still glowing in its cracks
A woman laughing in blue light, a stripe of warm light over her face
A woman in sunglasses between neon letters
The silhouette of a man with a guitar in front of laser rays
A man with words projected in red on his face
A couple in an arcade, looking at the camera

A fan

A layout that is an effect of the canvas: the slider moves as ever, the effect says where a slide is drawn. Without the canvas it is a row.

The silhouette of a man with a guitar in front of laser rays
A couple in an arcade, looking at the camera
A man kneeling by a boombox in front of neon signs
A woman laughing in blue light, a stripe of warm light over her face
A woman in sunglasses between neon letters
A man with words projected in red on his face
A woman in a white top, lightning projected on her
Bark of a tree beside lava that has cooled, still glowing in its cracks

As wide as the image

Every slide takes the width of its image.

A man with words projected in red on his face
A woman in sunglasses between neon letters
A woman in a white top, lightning projected on her
Bark of a tree beside lava that has cooled, still glowing in its cracks
A woman laughing in blue light, a stripe of warm light over her face
The silhouette of a man with a guitar in front of laser rays

As high as the slide

The height follows the move, and the page below follows the height.

Bark of a tree beside lava that has cooled, still glowing in its cracks
A woman in a white top, lightning projected on her
A woman in sunglasses between neon letters
A man with words projected in red on his face

Stack

Slides on top of each other. The position runs through a transition: drag slowly to stop half way.

A man kneeling by a boombox in front of neon signs

On top of each other

Twenty transitions to choose from.

A couple in an arcade, looking at the camera

Follows the pointer

Stop half way, go back.

A lagoon at dusk, a bare tree and the last of the sun mirrored in the water

Video too

A transition into a playing video.

The silhouette of a man with a guitar in front of laser rays

A crossfade without WebGL

Switch the canvas off to see it.

Covers

An animation as a plugin. On the canvas it is an effect that turns the mesh; with the canvas off, the progress plugin tells the slides where they are and CSS turns them.

A woman in a white top, lightning projected on her
A man kneeling by a boombox in front of neon signs
Bark of a tree beside lava that has cooled, still glowing in its cracks
A woman laughing in blue light, a stripe of warm light over her face
A woman in sunglasses between neon letters
The silhouette of a man with a guitar in front of laser rays
A man with words projected in red on his face

Loading

A screen while the pictures load, and events that say how far they are. The screen is the one of the library; any element of the page can be it.

Bark of a tree beside lava that has cooled, still glowing in its cracks
The silhouette of a man with a guitar in front of laser rays
A woman in a white top, lightning projected on her
A couple in an arcade, looking at the camera
A woman in sunglasses between neon letters
A man kneeling by a boombox in front of neon signs

    Buttons anywhere, and events

    The buttons are not in the slider: they name it with data-gs-for. The list is what the slider says while it is used.

    The silhouette of a man with a guitar in front of laser rays
    A couple in an arcade, looking at the camera
    A man kneeling by a boombox in front of neon signs
    A woman laughing in blue light, a stripe of warm light over her face
    A woman in sunglasses between neon letters
    A man with words projected in red on his face