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

<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 label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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 label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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>