OVERVIEW
PantherUI 3D Carousel
A GPU-accelerated, CSS-based 3D carousel built with preserve-3d transforms. Panels are arranged as faces of a geometric prism and rotated smoothly in 3D space.
Originally by Jim Ing for BlackBerry, 2013–2014.
- ES6 class-based architecture
- Touch & mouse gesture support
- Maximize / restore panels
- Dynamic panel injection
GEOMETRY
Trigonometric Placement
Each panel is rotated at equal angular intervals and translated outward using the inscribed polygon radius.
- θ = 360° / panelCount
- r = (w/2) / tan(π / n)
- transform: rotateY(θ·i) translateZ(r)
- Min. 3 panels required
- Recalculates on resize
INTERACTION
Input System
Unified pointer model handles mouse, touch, and stylus. A minimum drag threshold prevents accidental rotations.
- Pointer Events API (unified)
- setPointerCapture for reliable drag
- 6px minimum drag deadzone
- Flick velocity detection
- Debounced resize listener
CONTROLS
Public API
All navigation is exposed as clean
methods on the Panther.Carousel namespace.
- Carousel.init(opts)
- Carousel.turnNext(id)
- Carousel.turnPrev(id)
- Carousel.turnTo(id, side)
- Carousel.refresh()
API
Options
Carousels are fully configurable at initialization and support runtime callbacks.
- id: string (required)
- backgroundColor: css color
- easing: named key or css string
- callback: fn(carousel)
- callbackBreak: boolean