component
Carousel3dView
By Jaffer Sathick
Details
- Jaffer SathickAuthor
- componentType
- 2026-06-02Published
- 2026-05-30Updated
- 2026-05-23Added
- CarouselsCategories
Summary
Four scroll-driven 3D carousel effects
Description
Four 3D effects: — Coverflow: classic side-rotation — Cylinder: concave barrel wrap with panels curving along the cylinder — Stack: deck-of-cards pile at the centre — Tilt: subtle parallax drift and tilt for an editorial feel Built for production: — Up to 7 slides with image, title, description, and optional link — Vertical or horizontal scroll — Directional drag-release snap — small drag returns, real drag advances one slide — Optional autoplay with hover-pause — Keyboard navigation (arrows, Enter to open links) — Active slide can scale up to 2× to stand out — Respects prefers-reduced-motion — Mobile-tuned WebGL pixel ratio for smooth touch performance — Accessible carousel landmark with live region for screen readers Every parameter is tunable from the property panel.
Introduction
Four scroll-driven 3D carousel effects
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1565