Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add carousels with Bootstrap 5.
Carousel
A carousel is a slideshow component for cycling through elements.
The slides can have image or text.
If the browser supports the page visibility API, then the carousel will stop sliding if the screen isn’t visible to the user.
Slides Only
We can add a carousel with a div with the .carousel and ,slide classes.
For example, we can write:
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
</div>
</div>
We have the div with the carousel and slide classes.
Also, we added the .data-ride attribute with the value carousel to add the carousel.
In addition, we have a div with the carousel-inner class to hold the items.
And to add the items, we add divs with the carousel-item class.
active makes it the active slide.
With Controls
We can add a carousel with previous and next controls.
We add them by adding a elements outside the slides div.
For example, we write:
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
We have 2 a elements with the href set to the selector for the carousel.
Also, we have the data-slide attributes to indicate what kind of controls we have.
Inside it, we have the icon we can click on and the text for the screen reader.
With Indicators
We can add slide indicators in addition to the slides and controls.
To add that, we add an ol with the .carousel-indicators class.
Then in the li tag, we have the data-target attribute set to the selector of the carousel.
For example, we can write:
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
<div class="carousel-item">
<img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
We have the ol element with the li s.
The data-target attribute is set to the #carousel to show the correct slide indicator.
data-slide-to has the index of the slide to slide to.
With Captions
Also, we can add captions to slides.
For example, we can write:
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placekitten.com/600/600" class="d-block w-100" alt="cat">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="carousel-item">
<img src="http://placekitten.com/600/600" class="d-block w-100" alt="cat">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
</div>
<div class="carousel-item">
<img src="http://placekitten.com/600/600" class="d-block w-100" alt="cat">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
to add captions to our slides.
We added divs with the .carousel-caption class to add the slide captions.
Conclusion
We can add the carousels with slides, controls, and captions.