Skip to main content

Status

The status component displays the current slide number and the total number of slides in the carousel. It is displayed at the bottom of the carousel and is updated as the user navigates through the slides.

showStatus​

  • Default : true
  • Type : boolean

Determines whether to display the status component.

Live Editor
<Carousel showStatus={true} />
Result
Loading...

Status Props​

The following properties are effective only when showStatus is true. All properties should be included within the status object.

status.color​

  • Default : '#ffffff'
  • Type : string

Specifies the default color of the status text. Any CSS color value can be used.

Live Editor
<Status color='#ffffff' />
Result
Loading...

status.fontSize​

  • Default : '1rem'
  • Type : string

Sets the font size of the status text. Any CSS length unit can be used.

Live Editor
<Status fontSize='1rem' />
Result
Loading...

status.fontWeight​

  • Default : '600'
  • Type : string

Defines the font weight of the status text. Any CSS font weight value can be used.

Live Editor
<Status fontWeight='600' />
Result
Loading...

status.shadow​

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

Sets the shadow effect for the status text. You can apply any value compatible with the CSS text-shadow property.

Live Editor
<Status shadow='0 0.05rem 0.1rem rgba(0, 0, 0, 0.5)' />
Result
Loading...

status.translate​

  • Default : ['0px', '0px']
  • Type : [string, string]

Adjusts the position of the status. The first index represents movement along the x-axis, and the second index represents movement along the y-axis.

Live Editor
<Status translate={['0px', '0px']} />
Result
Loading...