Skip to main content

3D Features

The carousel's 3D features provide powerful customization options to create a unique, visually engaging experience. Use the following properties to adjust depth, layout, and overall visual perspective.

perspective​

  • Default : 1
  • Type : string | number

Defines the distance from the viewer's point of view to the carousel, similar to the CSS perspective property. A smaller value increases the depth, making items appear larger in the positive Z-axis and smaller in the negative Z-axis. Conversely, a larger value minimizes the depth effect.

If a numeric value is given, it scales with the container’s width.

Live Editor
<Carousel perspective={1} />
Result
Loading...

perspectiveOrigin​

  • Default : 'center'
  • Type : string

Sets the origin point from which the viewer observes the carousel, following the CSS perspective-origin property.

Live Editor
<Carousel perspectiveOrigin='center' />
Result
Loading...

layout​

  • Default : 'default'
  • Type : 'default' | CarouselLayoutInfo

When set to 'default', the carousel uses the standard layout, which can be adjusted further with defaultOption.

For advanced control, use CarouselLayoutInfo to set custom placement for each item. For detailed guidance, see Custom Layout.

defaultOption​

Applies when layout is set to 'default'. Customize the carousel's appearance with the following properties:

.numOfSlides​

  • Default : 'auto'
  • Type : 'auto' | 2 | 3 | 5

Sets the number of visible slides. When set to 'auto', the carousel displays 2, 3, or 5 slides based on the item count. Set a fixed number to maintain a consistent slide count.

Live Editor
<Carousel defaultOption={{ numOfSlides: 'auto' }} />
Result
Loading...

.widthFactor​

  • Default : 1
  • Type : number

Controls the horizontal width of the carousel. Smaller values narrow the carousel, while larger values make it wider.

Live Editor
<Carousel defaultOption={{ widthFactor: 1 }} />
Result
Loading...

.depthFactor​

  • Default : 1
  • Type : number

Adjusts the spacing between items along the Z-axis. Smaller values reduce spacing, creating a compact look, while larger values increase the spacing.

Live Editor
<Carousel defaultOption={{ depthFactor: 1 }} />
Result
Loading...

.angleFactor​

  • Default : 1
  • Type : number

Sets the rotation angle of items in the carousel. Multiply this factor to adjust the angle, where smaller values create a subtle rotation and larger values increase the rotation.

Live Editor
<Carousel defaultOption={{ angleFactor: 1 }} />
Result
Loading...

children​

  • Type : ReactNode | ReactNode[]
  • Default : undefined

The children prop lets you add additional elements to the 3D space outside the carousel items. These elements remain stationary as the carousel rotates. Position elements freely using translate3d to create layouts with added depth and dimension.

Live Editor
<Carousel>
  <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate3d(-50%, -50%, -10px)',
    padding: '2em',
    borderRadius: '50%',
    backgroundColor: 'pink',
    color: 'white',
    fontWeight: 'bold',
  }}>Peek A Boo</div>
</Carousel>
Result
Loading...