Skip to main content

2D Features

A range of 2D features that allow for extensive customization of the carousel’s appearance and layout. Each setting can help you adjust the container and items to best fit your design.

Container​

Settings for customizing the carousel container, including dimensions, padding, and accessibility attributes.

ariaLabel​

  • Default : '3d carousel'
  • Type : string

Specifies an accessible label for the carousel container. This is useful for screen readers and improves accessibility.

containerWidth​

  • Default : '100%'
  • Type : string

Specifies the width of the carousel container. You can use any valid CSS unit to define this value.

Live Editor
<Carousel containerWidth='50%' />
Result
Loading...

containerHeight​

  • Default : 'auto'
  • Type : string

Specifies the height of the carousel container. You can use any valid CSS unit for this value.

warning

If the height prop is set to a responsive value like 'auto', '*%', or number, then containerHeight must be fixed to avoid layout issues.

Live Editor
<Carousel containerHeight='100px' />
Result
Loading...

containerPadding​

  • Default : '1rem'
  • Type : string

Defines the space between the carousel container’s edge and the inner carousel items. You can use any CSS unit for this value.

tip

Since the container has overflow: hidden applied, adding padding can create a subtle shadow effect around the items for a more natural look.

Live Editor
<Carousel containerPadding='0' />
Result
Loading...

Settings for customizing the dimensions and appearance of individual carousel items.

width​

  • Default : '400px'
  • Type : string | number

Sets a consistent width for all carousel items. You can use any CSS unit for this value.

Live Editor
<Carousel width='400px' />
Result
Loading...

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

Live Editor
<Carousel width={0.4} />
Result
Loading...

If set to 'auto', the width will automatically adjust based on the item’s aspect ratio.

Live Editor
<Carousel width='auto'/>
Result
Loading...

height​

  • Default : '300px'
  • Type : string | number

Defines the height of carousel items. Any CSS unit can be used.

Live Editor
<Carousel height='300px' />
Result
Loading...

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

Live Editor
<Carousel height={0.8} containerHeight='350px' />
Result
Loading...

If set to 'auto', the height will adjust based on the item’s aspect ratio.

Live Editor
<Carousel width='250px' height='auto' containerHeight='350px' />
Result
Loading...

aspectRatio​

  • Default : 'auto'
  • Type : 'auto' | number

This represents the CSS aspect-ratio value. When either the width or height is fixed, the other dimension is calculated using the aspect ratio.

Live Editor
<Carousel width='40%' height='auto' aspectRatio={1.33} />
Result
Loading...

align​

  • Default : 'center'
  • Type : 'top' | 'center' | 'bottom'

Specifies the vertical alignment of carousel items within the container. Particularly useful when items vary in height or the container height exceeds the item height.

Live Editor
<Carousel align='top' width='250px' height='auto' containerHeight='350px' />
Result
Loading...

boxShadow​

  • Default : '0 0.1rem 0.5rem rgba(0, 0, 0, 0.5)'
  • Type : string

Applies a shadow effect to carousel items using the CSS box-shadow property.

Live Editor
<Carousel boxShadow='0 0.1rem 0.5rem rgba(0, 0, 0, 0.5)' />
Result
Loading...