Creates a 3D cylindrical carousel with smooth rotation. Items are positioned in a circle using CSS 3D transforms with automatic opacity fading based on position. Can be scroll-driven or auto-rotating. Perfect for portfolios, product showcases, or interactive galleries.

Gallery Carousel

Scroll the page to rotate the carousel.

Dimensions

Radius 200-1500 pixels

Distance of items from center. Larger radius creates wider, more spacious carousel.

Default: 600

Perspective 500-5000 pixels

3D perspective depth. Lower creates dramatic angle, higher is more subtle.

Default: 2000

Rotation

Auto Rotate Speed 0.0-0.5

Speed of automatic rotation. Zero stops auto-rotation, higher spins faster.

Default: 0.02

Scroll Driven true/false

Control carousel with page scroll. When true, scrolling rotates carousel.

Default: true

Scroll Smoothness 0.01-1.0

Smoothness of rotation transitions. Lower is smoother but slower, higher is snappier.

Default: 0.1

Performance

This element uses CSS 3D transforms with preserve-3d for carousel effect. Calculates item positions using trigonometry and applies rotateY transforms. Features scroll event listeners with passive mode, automatic opacity calculation based on angle, and requestAnimationFrame for smooth 60fps animation. Suitable for most devices with 6-12 items maximum for best performance.