A card slider drawn on a 2D canvas. Square picture cards sit side by side on a ring seen slightly from above, and the whole band rides a travelling wave, so cards rise and fall as they go round and bank into each crest like a ribbon twisting in the air. Every card is curved around the cylinder rather than drawn flat, with soft shading as it turns away, a gloss that slides across the front and a fade toward the back of the ring. Drag, fling, the wheel or the arrow keys spin it: speed bends the band further and a critically damped spring lets it settle without wobbling, and the pointer tips the ring a little toward itself. The default set alternates three generated photos with three graphic posters from the HorizonX image stock, and you can replace them with up to sixteen of your own. Card count, shape, gap and corner radius, ring size, depth, tilt and lean, wave count, height, twist and flow, autoplay, smoothing, momentum, sensitivity, lighting, background and the four corner labels are all editable live. The engineering holds up in a real page: a screen reader gets a list of the pictures and a live region, previous and next buttons appear on touch screens, reduced motion holds the ring still, rendering pauses off screen and in hidden tabs, and a browser without canvas sees the pictures as a plain list. The export is one HTML file with the default pictures embedded.
In collections: React Carousels & Image Galleries
Guide: Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion· React Carousel: Build One With CSS Scroll Snap or a Library· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Carousel · HTML / CSS / JS · All tools