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.

    First slide

    First slide label

    Nulla vitae elit libero, a pharetra augue mollis interdum.

    Second slide

    Second slide label

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Third slide

    Third slide label

    Praesent commodo cursus magna, vel scelerisque nisl consectetur.

    Controlled

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

    First slide

    First slide label

    Nulla vitae elit libero, a pharetra augue mollis interdum.

    Second slide

    Second slide label

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Third slide

    Third slide label

    Praesent commodo cursus magna, vel scelerisque nisl consectetur.

    Crossfade

    Add the fade prop to your carousel to animate slides with a fade transition instead of a slide.

    First slide

    First slide label

    Nulla vitae elit libero, a pharetra augue mollis interdum.

    Second slide

    Second slide label

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Third slide

    Third slide label

    Praesent commodo cursus magna, vel scelerisque nisl consectetur.

    Individual Item Intervals

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

    First slide

    First slide label

    Nulla vitae elit libero, a pharetra augue mollis interdum.

    Second slide

    Second slide label

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Third slide

    Third slide label

    Praesent commodo cursus magna, vel scelerisque nisl consectetur.

    Dark variant

    Add variant="dark" to the Carousel for darker controls, indicators, and captions.

    First slide
    First slide label

    Nulla vitae elit libero, a pharetra augue mollis interdum.

    Second slide
    Second slide label

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Third slide
    Third slide label

    Praesent commodo cursus magna, vel scelerisque nisl consectetur.

    API

    Carousel

    import Carousel from 'react-bootstrap/Carousel'
    NameTypeDefaultDescription
    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

    fade
    boolean
    		false

    Animates slides with a crossfade animation instead of the default slide animation

    indicatorLabels
    array<>
    		[]

    An array of labels for the indicators. Defaults to "Slide #" if not provided.

    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.

    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.

    variant
    'dark'

    Color variant that controls the colors of the controls, indicators and captions.

    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.

    Carousel.Item

    import Carousel from 'react-bootstrap/Carousel'
    NameTypeDefaultDescription
    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.

    Carousel.Caption

    import Carousel from 'react-bootstrap/Carousel'
    NameTypeDefaultDescription
    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.