Carousels

A slideshow component for cycling through elements—images or slides of text—like a carousel.

Example

Carousels don’t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they’re not explicitly required. Add and customize as you see fit.

Controlled

You can also control the Carousel state, via the activeIndex prop and onSelect handler.

Individual Item Intervals

You can specify individual intervals for each carousel item via the interval prop.

API

import Carousel from 'react-bootstrap/Carousel'Copy import code for the Carousel component
Name Type Default Description
activeIndex
number
controlled by: onSelect, initial prop: defaultActiveindex

Controls the current visible slide
as
elementType

You can use a custom element type for this component.
controls
boolean
 true

Show the Carousel previous and next arrows for changing the current slide
defaultActiveIndex
number
 0
fade
boolean
 false

Cross fade slides instead of the default slide animation
indicators
boolean
 true

Show a set of slide position indicators
interval
number
 5000

The amount of time to delay between automatically cycling an item. If null, carousel will not automatically cycle.
keyboard
boolean
 true

Whether the carousel should react to keyboard events.
nextIcon
node
 <span aria-hidden="true" className="carousel-control-next-icon" />

Override the default button icon for the "next" control
nextLabel
string
 'Next'

Label shown to screen readers only, can be used to show the next element in the carousel. Set to null to deactivate.
onSelect
function
controls activeIndex

Callback fired when the active item changes.

(eventKey: number, event: Object | null) => void
onSlid
function

Callback fired when a slide transition ends.

(eventKey: number, direction: 'left' | 'right') => void
onSlide
function

Callback fired when a slide transition starts.

(eventKey: number, direction: 'left' | 'right') => void
pause
'hover' | false
 'hover'

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
prevIcon
node
 <span aria-hidden="true" className="carousel-control-prev-icon" />

Override the default button icon for the "previous" control
prevLabel
string
 'Previous'

Label shown to screen readers only, can be used to show the previous element in the carousel. Set to null to deactivate.
ref
React.Ref<CarouselRef>
slide
boolean
 true

Enables animation on the Carousel as it transitions between slides.
touch
boolean
 true

Whether the carousel should support left/right swipe interactions on touchscreen devices.
wrap
boolean
 true

Whether the carousel should cycle continuously or have hard stops.
bsPrefix
string
 'carousel'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import Carousel from 'react-bootstrap/Carousel'Copy import code for the Carousel component
Name Type Default Description
as
elementType
 <div>

Set a custom element for this component
interval
number

The amount of time to delay between automatically cycling this specific item. Will default to the Carousel's interval prop value if none is specified.
bsPrefix
string
 'carousel-item'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.
import Carousel from 'react-bootstrap/Carousel'Copy import code for the Carousel component
Name Type Default Description
as
elementType
 <div>

You can use a custom element type for this component.
bsPrefix required
string
 'carousel-caption'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/carousel/