No. 005
Tunnel slider
Photos printed on the inside of a cylinder. Each photo is cut into thin strips that bend with the curve. Drag or swipe to spin it; it drifts on its own when idle.
- Category
- Media
- Added
- Nov 4, 2026
- Good for
- Recent-work galleries: detailing, wraps, auto shops, any photo-heavy portfolio
- Built with
- HTML, CSS and JavaScript, no libraries. The original React component is included.
What it does
- Designed and built by Brecken as a React component; this library copy is a plain-JavaScript port with the same geometry and feel.
- Every photo is sliced into 12 vertical strips, each set at its own angle on the circle, so the image curves instead of swinging as a flat card.
- Drag or swipe to spin, with inertia. A swipe lifts the ring toward you and squashes it slightly, on one spring so the gaps between cards hold.
- It drifts slowly when idle, pauses when scrolled out of view and stays still for reduced motion.
- Each photo appears once. Small screens show the first ones that fit, and the caption names the photo facing you.
Use this element
Copy it into your website builder. It keeps the exact design and behavior, and your site's styles can't change it.
A short snippet that loads the element from finerui.com. Fixes and updates made here show up everywhere it's used.
Paste it into an HTML or embed block:
- Wix: Add, then Embed code, then Embed HTML
- Squarespace: a Code block
- Webflow: an Embed element
- WordPress: a Custom HTML block
- GoHighLevel: a Custom JS/HTML element
It sizes its own height and has a clear background, so it sits on your page like it belongs there.
Preparing the code…