In Bootstrap 5, the Carousel component allows you to create a slideshow of images or content that automatically transitions between slides. Carousels are commonly used to showcase multiple images or highlight key features on a website. Here’s how you can use the Carousel component in Bootstrap 5:
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExample" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" class="d-block w-100" alt="Image 1">
<div class="carousel-caption">
<h5>Slide 1</h5>
<p>Some description for slide 1</p>
</div>
</div>
<div class="carousel-item">
<img src="image2.jpg" class="d-block w-100" alt="Image 2">
<div class="carousel-caption">
<h5>Slide 2</h5>
<p>Some description for slide 2</p>
</div>
</div>
<div class="carousel-item">
<img src="image3.jpg" class="d-block w-100" alt="Image 3">
<div class="carousel-caption">
<h5>Slide 3</h5>
<p>Some description for slide 3</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>This example creates a basic carousel with three slides. The carousel-inner element contains the individual slides, each represented by a carousel-item class. Inside each carousel-item, you can add an image or any other content. The carousel-caption element is used to add a caption or description for each slide.
The carousel-indicators element contains a list of indicators that correspond to each slide. The carousel-control-prev and carousel-control-next elements create previous and next navigation buttons.
You can customize the Carousel component by adding additional options, such as autoplay, interval, and more. Additionally, you can add CSS styles to modify the appearance of the carousel to match your design.
Feel free to use the Carousel component to create an image slideshow or showcase important content in your Bootstrap 5 project. For more details and additional options related to the Carousel component, refer to the official Bootstrap documentation.
A description of what each class from the example above do:
| Class | Description |
|---|---|
.carousel | Creates a carousel |
.carousel-indicators | Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner | Adds slides to the carousel |
.carousel-item | Specifies the content of each slide |
.carousel-control-prev | Adds a left (previous) button to the carousel, which allows the user to go back between the slides |
.carousel-control-next | Adds a right (next) button to the carousel, which allows the user to go forward between the slides |
.carousel-control-prev-icon | Used together with .carousel-control-prev to create a “previous” button |
.carousel-control-next-icon | Used together with .carousel-control-next to create a “next” button |
.slide | Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |