Carousel

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

Slides only

Here’s a carousel with slides only. Note the presence of the .d-block and .w-100 on carousel images to prevent browser default image alignment.

Design
Code
First slide
Second slide
Third slide
<Carousel controls={false} indicators={false} >
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="First slide" />                                    
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Second slide" />                                   
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Third slide"/>                                    
    </Carousel.Item>
</Carousel>

With Control

Adding in the previous and next controls:

Design
Code
<Carousel indicators={false}>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="First slide" />                                    
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Second slide" />                                   
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Third slide"/>                                    
    </Carousel.Item>                               
</Carousel>

With indicators

You can also add the indicators to the carousel, alongside the controls, too.

Design
Code
<Carousel indicators>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="First slide" />                                    
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Second slide" />                                   
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Third slide"/>                                    
    </Carousel.Item>  
</Carousel>

With caption

Add captions to your slides easily with the <Carousel.Caption> within any <Carousel.Item>.

Design
Code
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.

function ControlledCarousel() {

    const [index, setIndex] = useState(0);

    const handleSelect = (selectedIndex, e) => {
      setIndex(selectedIndex);
    };

    return (        
        <Carousel activeIndex={index} onSelect={handleSelect}>
            <Carousel.Item>
                <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="First slide"/>
                <Carousel.Caption>
                    <h3 className="text-white" >First slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
                <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Second slide" />
                <Carousel.Caption>
                    <h3 className="text-white" >Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
                <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Third slide" />
                <Carousel.Caption>
                    <h3 className="text-white" >Third slide label</h3>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                </Carousel.Caption>
            </Carousel.Item>
        </Carousel>        
    )
    
}
render(<ControlledCarousel />);

Crossfade

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

Design
Code
<Carousel fade indicators={false}>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="First slide" />                                    
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Second slide" />                                   
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Third slide"/>                                    
    </Carousel.Item>
</Carousel>

Individual

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

Design
Code
<Carousel indicators={false}>
    <Carousel.Item interval={1000}>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="First slide" />                                    
    </Carousel.Item>
    <Carousel.Item interval={500}>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Second slide" />                                    
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Third slide" />                                    
    </Carousel.Item>
</Carousel>

Dark Variant

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

Design
Code
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.

<Carousel variant="dark">
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="First slide" />
        <Carousel.Caption>
        <h5>First slide label</h5>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Second slide"/>
        <Carousel.Caption>
        <h5>Second slide label</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
        <Image className="d-block w-100" src="https://fakeimg.pl/1140x350/?text=Image%20Placeholder" alt="Third slide"/>
        <Carousel.Caption>
        <h5>Third slide label</h5>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </Carousel.Caption>
    </Carousel.Item>
</Carousel>