Components

#Uncontrolled

Allow the component to control its own state.

<Carousel>
  <Carousel.Item>
    <img width={900} height={500} alt="900x500" src="/carousel.png" />
    <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 width={900} height={500} alt="900x500" src="/carousel.png" />
    <Carousel.Caption>
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </Carousel.Caption>
  </Carousel.Item>
  <Carousel.Item>
    <img width={900} height={500} alt="900x500" src="/carousel.png" />
    <Carousel.Caption>
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>;

#Controlled

Pass down the active state on render via props.

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) {
    alert(`selected=${selectedIndex}, direction=${e.direction}`);
    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 width={900} height={500} alt="900x500" src="/carousel.png" />
          <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 width={900} height={500} alt="900x500" src="/carousel.png" />
          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="/carousel.png" />
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur.
            </p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    );
  }
}

render(<ControlledCarousel />);

#Props

#Carousel[source]

NameTypeDefaultDescription
slide
boolean
true
indicators
boolean
true
interval
number
5000

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

controls
boolean
true
pauseOnHover
boolean
true
wrap
boolean
true
onSelect
function

Callback fired when the active item changes.

(eventKey: any, ?event: Object) => any

If this callback takes two or more arguments, the second argument will be a persisted event object with direction set to the direction of the transition.

onSlideEnd
function
activeIndex
number
defaultActiveIndex
number
direction
one of: 'prev', 'next'
prevIcon
node
<Glyphicon glyph="chevron-left" />
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.

nextIcon
node
<Glyphicon glyph="chevron-right" />
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.

bsClass
string
'carousel'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.

#Carousel.Item[source]

NameTypeDefaultDescription
direction
one of: 'prev', 'next'
onAnimateOutEnd
function
active
boolean
false
animateIn
boolean
false
animateOut
boolean
false
index
number

#Carousel.Caption[source]

NameTypeDefaultDescription
componentClass
elementType
'div'

You can use a custom element type for this component.

bsClass
string
'carousel-caption'

Base CSS class and prefix for the component. Generally one should only change bsClass to provide new, non-Bootstrap, CSS styles for a component.