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.

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

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

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

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.

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

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

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

Made by Codescandy

Destributed by ThemeWagon