Bootstrap 5 Carousel
Bootstrap 5 Carousel is a slideshow component for cycling through images or slides, allowing users to showcase multiple pieces of content in a visually appealing and interactive way. It offers various options for customization and responsive design.
Bootstrap Carousel Classes:
| Class | Description |
|---|---|
| carousel | Applied to the main container div to initialize the carousel. |
| carousel-slide | Applied to individual slides within the carousel. |
| carousel-inner | Applied to a container div to hold all the slides. |
| carousel-item | Applied to each slide within the carousel inner container. |
| carousel-control-prev | Applied to the left navigation control button. |
| carousel-control-next | Applied to the right navigation control button. |
| carousel-control-prev-icon | Applied to the icon inside the left navigation control button. |
| carousel-control-next-icon | Applied to the icon inside the right navigation control button. |
| carousel-indicators | Applied to a container ul to hold the slide indicators. |
| active | Applied to the active slide and indicator to indicate the currently displayed slide. |
.carousel-caption | to add a caption to the slide. |
Examples of Bootstrap 5 Carousel
Example: This is a Bootstrap 5 carousel with previous and next arrows styled black. It displays images with slide indicators and navigation controls, allowing users to navigate through the carousel slides.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 Carousel</title>
<!-- Load Bootstrap -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous"></script>
<style>
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-color: black;
}
</style>
</head>
<body style="text-align: center;">
<div class="container mt-3">
<div id="GFG" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#GFG" data-slide-to="0" class="active"></li>
<li data-target="#GFG" data-slide-to="1"></li>
<li data-target="#GFG" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src=
"https://media.w3wiki.net/wp-content/uploads/w3wiki-9.png"
alt="GFG">
</div>
<div class="carousel-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20190918234528/colorize1.png"
alt="GFG">
</div>
<div class="carousel-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20190918234815/colorize2.png"
alt="GFG">
</div>
</div>
<a class="carousel-control-prev"
href="#GFG"
data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next"
href="#GFG"
data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Carousel Example Output
Add Captions to Slides:
Use .carousel-caption class inside the .carousel-item class to add a caption to the slide.
Example: Bootstrap Carousel with indicators, captions, and navigation controls. Customized indicators and captions with Bootstrap classes. Slide transition and navigation controlled by Bootstrap JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>
Bootstrap Carousel
</title>
<!-- Load Bootstrap -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
integrity=
"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
integrity=
"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
crossorigin="anonymous">
</script>
</head>
<style>
/* Customizing the carousel for white background */
.carousel-indicators .active {
background-color: green;
}
.carousel-indicators li {
background-color: burlywood;
}
</style>
<body style="text-align: center;">
<div class="container mt-3">
<div id="GFG" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#GFG" data-slide-to="0" class="active">
</li>
<li data-target="#GFG" data-slide-to="1"></li>
<li data-target="#GFG" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src=
"https://media.w3wiki.net/wp-content/uploads/w3wiki-9.png"
alt="GFG">
<div class="carousel-caption">
<h3 class="text-warning">
Image 1
</h3>
</div>
</div>
<div class="carousel-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20190918234528/colorize1.png"
alt="GFG">
<div class="carousel-caption">
<h3 class="text-warning">
Image 2
</h3>
</div>
</div>
<div class="carousel-item">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20190918234815/colorize2.png"
alt="GFG" />
<div class="carousel-caption">
<h3 class="text-warning">
Image 3
</h3>
</div>
</div>
</div>
<a class="carousel-control-prev"
href="#GFG"
data-slide="prev">
<span class="carousel-control-prev-icon">
</span>
</a>
<a class="carousel-control-next"
href="#GFG"
data-slide="next">
<span class="carousel-control-next-icon">
</span>
</a>
</div>
</div>
</body>
</html>
Output:
Bootstrap 5 Carousel Example Output
Contact Us