Carousel 3D
Pure-CSS 3D rotating ring of cards. Each item is laid out on a circular path with perspective depth, auto-rotating around the Y axis. Flexible via props, scoped slot, generics, and built-in accessibility controls.
Basic
Default settings: 12 images, 32s rotation, lateral fade edges, responsive card width clamp(10em, 35vw, 17.5em), 7/10 aspect ratio, auto-pause when scrolled off-screen.
v-model Animated Toggle
Use v-model:animated for two-way binding. External button OR click on the carousel body itself toggle the same state.
Click Handler
Listen to @item-click for interactivity. Enable :pause-on-hover so users can comfortably aim at a card before clicking.
Click-to-Toggle + A11y
Clicking anywhere on the carousel toggles play/pause. Component renders with role="button" (or region for single/empty), aria-pressed, and supports Enter/Space keyboard toggle.
Edge Cases: Item Count
Component handles edge counts gracefully. 1 item: static center. 2 items: arbitrary spacing (tan formula undefined at 180°). 3+ items: proper ring.
Custom Duration
Adjust rotation speed with duration. Values: 16s (fast), 32s (default), 64s (slow).
Reverse + Tilt
:reverse flips rotation direction. tilt rotates the ring on X axis for extra depth.
Initial Rotation
Use initial-rotation to offset the starting angle.
Custom Card Dimensions
Adjust card-width and card-aspect to match your content.
Ground Shadow + No Fade
:show-shadow="true" adds soft ground shadow. :fade-edges="false" removes lateral mask fade.
Custom Slot + Generic Type
The #item slot is fully typed via TypeScript generics. Here the item parameter is inferred as BrandItem with typed initials and name fields.
Custom Card Class
Use card-class to apply styling to every card wrapper.
Combined Showcase
All features together: tilt, ground shadow, hover scale, click-to-toggle, slow rotation, custom card class, gradient background.