
WebGPU image slider and carousel

WebGPU image slider and carousel
gpu slider is a web library for creating image and video sliders and carousels rendered with GPU shaders. It uses WebGPU where available and falls back to WebGL 2. If neither is supported, it can display a scrolling row of slides with snapping and use a crossfade transition. The library also supports a no-script mode using HTML attributes. Slides can be moved with dragging, touch swipes, the mouse wheel, keyboard controls, or buttons. Motion can use spring-based behavior, with options to snap, loop, move horizontally or vertically, and rest at different positions. The library includes transitions and visual effects such as liquid, burn, glitch, and fold effects, along with pointer-responsive distortion. Other available features include a lightbox, autoplay, navigation dots, thumbnails, tickers, and videos that play when in view. The core library has no dependencies, and optional features are provided as plugins that can be imported as needed. React support is available through the `<Slider>` and `<Slide>` components, with props for configuration and support for slides that change over time. Images are loaded as they approach the slider and selected at a size suited to the screen. WebGPU and WebGL 2 effects are built from GLSL shaders, which are translated for WebGPU.