A 3D carousel of curved photo cards arranged on a ring about 84% of the stage wide and seen almost side on, a little from above. Each card bends with the ring, with rounded corners and faint fold lines between its strips. The ring turns slowly on its own, about one turn every twenty seconds. Drag sideways to spin it and up or down to tumble it end over end, with no limit either way; let go and it flings, then eases back into the idle turn. Double-click, Enter or Home stands it upright again, the scroll wheel turns it, the arrow keys spin and tilt it, and Space or the pause button stops it. A small dot follows the cursor, and portraits keep the face in view. The ring always shows every photo the same number of times, never grows taller than the stage, and the fold lines follow the background colour. Reduced motion stops the idle turn and the tumble. Frames stop when nothing moves, off screen and in hidden tabs, and a still card replaces the scene if WebGL is unavailable. Up to twelve photos, ring size, view angle, card height, gap, card corners, fold lines, background, turn speed, wheel and cursor dot are editable. The export is one HTML file.
In collections: Web Image Galleries & Photo Grid Layouts· React Carousels & Image Galleries
Guide: React Carousel: Build One With CSS Scroll Snap or a Library· Scroll-Driven and Auto-Drifting Galleries: Choose the Right Motion· HTML Marquee Is Deprecated: How to Build a Modern Marquee
Carousel · HTML / CSS / JavaScript · All tools