# Carousels Carousel, Carousel.Item, Carousel.Caption

# Uncontrolled

Allow the component to control its own state.


            const carouselInstance = (
              <Carousel style={{maxWidth: 900, maxHeight: 500, margin: 'auto'}}>
                <Carousel.Item>
                  <img width={900} height={500} alt="900x500" src="/imgs/app/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="/imgs/app/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="/imgs/app/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(...args) {
                super(...args);

                this.state = {
                  index: 0,
                  direction: null
                };
              }

              handleSelect(selectedIndex, e) {
                alert('selected=' + selectedIndex + ', direction=' + e.direction);
                this.setState({
                  index: selectedIndex,
                  direction: e.direction
                });
              }

              render() {
                return (
                  <Carousel activeIndex={this.state.index} direction={this.state.direction} onSelect={::this.handleSelect}  style={{maxWidth: 900, maxHeight: 500, margin: 'auto'}}>
                    <Carousel.Item>
                      <img width={900} height={500} alt="900x500" src="/imgs/app/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="/imgs/app/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="/imgs/app/carousel.png"/>
                      <Carousel.Caption>
                        <h3>Third slide label</h3>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                      </Carousel.Caption>
                    </Carousel.Item>
                  </Carousel>
                );
              }
            }

            
          

# Props

Carousel

NameTypeDefaultDescription
activeIndexnumber
controlsbooleantrue
defaultActiveIndexnumber
directionone of: 'prev', 'next'
indicatorsbooleantrue
intervalnumber5000
nextIconnode<Glyphicon glyph="chevron-right" />
onSelectfunction
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.
(eventKey: any) => any | (eventKey: any, event: Object) => any
onSlideEndfunction
pauseOnHoverbooleantrue
prevIconnode<Glyphicon glyph="chevron-left" />
slidebooleantrue
wrapbooleantrue

Carousel.Item

NameTypeDefaultDescription
activebooleanfalse
animateInbooleanfalse
animateOutbooleanfalse
captionnode
directionone of: 'prev', 'next'
indexnumber
onAnimateOutEndfunction

Carousel.Caption

NameTypeDefaultDescription
componentClasselementType'div'You can use a custom element for this component