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.

    <Carousel>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=First slide&bg=373940"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Second slide&bg=282c34"
          alt="Third slide"
        />
    
        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Third slide&bg=20232a"
          alt="Third slide"
        />
    
        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>;
    
    Press esc to disable tab trapping

    Controlled

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

    class ControlledCarousel extends React.Component {
      constructor(props, context) {
        super(props, context);
    
        this.handleSelect = this.handleSelect.bind(this);
    
        this.state = {
          index: 0,
          direction: null,
        };
      }
    
      handleSelect(selectedIndex, e) {
        this.setState({
          index: selectedIndex,
          direction: e.direction,
        });
      }
    
      render() {
        const { index, direction } = this.state;
    
        return (
          <Carousel
            activeIndex={index}
            direction={direction}
            onSelect={this.handleSelect}
          >
            <Carousel.Item>
              <img
                className="d-block w-100"
                src="holder.js/800x400?text=First slide&bg=373940"
                alt="First slide"
              />
              <Carousel.Caption>
                <h3>First slide label</h3>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
              </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
              <img
                className="d-block w-100"
                src="holder.js/800x400?text=Second slide&bg=282c34"
                alt="Third slide"
              />
    
              <Carousel.Caption>
                <h3>Second slide label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
              <img
                className="d-block w-100"
                src="holder.js/800x400?text=Third slide&bg=20232a"
                alt="Third slide"
              />
    
              <Carousel.Caption>
                <h3>Third slide label</h3>
                <p>
                  Praesent commodo cursus magna, vel scelerisque nisl consectetur.
                </p>
              </Carousel.Caption>
            </Carousel.Item>
          </Carousel>
        );
      }
    }
    
    render(<ControlledCarousel />);
    
    Press esc to disable tab trapping

    API

    import Carousel from 'react-bootstrap/Carousel'
    NameTypeDefaultDescription
    activeIndex
    number
    0
    controlled by: onSelect, initial prop: defaultActiveindex

    Controls the current visible slide

    as
    elementType
    <div>

    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

    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

    Enable keyboard navigation via the Arrow keys for changing slides

    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: any, direction: 'prev' | 'next', ?event: Object) => any
    onSlideEnd
    function

    A callback fired after a slide transitions in

    pauseOnHover
    boolean
    true

    Temporarily puase the slide interval when the mouse hovers over a slide.

    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.

    wrap
    boolean
    true

    Slides will loop to the start when the last one transitions

    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'
    NameTypeDefaultDescription
    as
    elementType
    <div>

    You can use a custom element type for this component.

    bsPrefix required
    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'
    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.