A slideshow component for cycling through elements—images or slides of text—like a carousel.
Example
Carousels don’t automatically normalize slide dimensions. As such,you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators,they’re not explicitly required. Add and customize as you see fit.
The .activeclass needs to be added to one of the slidesotherwise the carousel will not be visible. Also be sure to set a unique id on the .carouselfor optional controls,especially if you’re using multiple carousels on a single page. Control and indicator elements must have a data-bs-targetattribute(or hreffor links) that matches the id of the .carouselelement.
Slides only
Here’s a carousel with slides only. Note the presence of the .d-blockand .w-100on carousel images to prevent browser default image alignment.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div></div></div>With controls
Adding in the previous and next controls:
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div></div><a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></a></div>With indicators
You can also add the indicators to the carousel,alongside the controls,too.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"><ol class="carousel-indicators"><li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li><li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li><li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div></div><a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></a></div>With captions
Add captions to your slides easily with the .carousel-captionelement within any .carousel-item. They can be easily hidden on smaller viewports,as shown below,with optional display utilities. We hide them initially with .d-noneand bring them back on medium-sized devices with .d-md-block.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"><ol class="carousel-indicators"><li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li><li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li><li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="..." class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Nulla vitae elit libero,a pharetra augue mollis interdum.</p></div></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>Second slide label</h5><p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p></div></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."><div class="carousel-caption d-none d-md-block"><h5>Third slide label</h5><p>Praesent commodo cursus magna,vel scelerisque nisl consectetur.</p></div></div></div><a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></a></div>Crossfade
Add .carousel-fadeto your carousel to animate slides with a fade transition instead of a slide.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel"><div class="carousel-inner"><div class="carousel-item active"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="..." class="d-block w-100" alt="..."></div></div><a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></a><a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></a></div>