Cylindrical Carousel
Draggable 3D cylindrical carousel with perspective rotation.
Main Features of Cylindrical Carousel
How to Use Cylindrical Carousel in Next.js
Installation Guide for Cylindrical Carousel
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
images | string[] | [] | Array of image URLs for the carousel |
cardCount | number | 8 | Number of cards in the carousel |
backgroundColor | string | bg-[#111] | Background color of the component |
perspective | string | perspective-[1000px] | CSS perspective value for 3D effect |
containerSize | string | w-40 h-60 | Size of each card container |
radius | number | 280 | Radius of the cylindrical carousel |
springStiffness | number | 50 | Spring animation stiffness |
springDamping | number | 20 | Spring animation damping |
dragMultiplier | number | 0.5 | Multiplier for drag sensitivity |
className | string | Additional CSS classes |
Related Components
When to Use
Perfect for luxury brands and fashion-forward modern web applications that need a circular gallery. This production-ready React UI component is ideal for showcasing product lines or team members in a continuous, 3D cylindrical space.
Best Practices
Maintain consistent spacing within your design system by calculating the `radius` based on the number of cards. Follow React best practices by using the `dragMultiplier` to ensure the interaction feels responsive but not jittery. Optimize for performance in large-scale applications by lazy-loading the images within the carousel.
Why This Component Matters in Modern UI Development
Cylindrical UI structures are a sophisticated way to manage horizontal content in modern UI development. This reusable React component provides a hardware-accelerated 3D carousel that enhances your real-world application architecture with a unique, draggable interaction.
Frequently Asked Questions
QHow many cards are recommended?
A card count of 8 to 12 usually provides the smoothest looking curve for the cylindrical effect.
QCan I use it as a vertical cylinder?
The current implementation is horizontal, but the axis of rotation can be adapted for vertical scrolling with minor adjustments.
QIs the dragging circular?
Yes, the dragging physics are mapped back to the cylinder's rotation, allowing for infinite circular navigation.