Bootstrap Carousel
A carousel is a set of rotating slides that may contain images or text displayed on the home page of websites. It is popularly used in website designing. The cycling contents of the carousel are built with CSS 3D and Javascript. The carousel includes buttons for changing the slides like previous or next. Bootstrap provides an easy way to add a carousel to the web pages.
Example: Create carousel in Bootstrap
To create a carousel on the web page include class .carousel slide. For immediately loading the image .data-bs-ride is set to the carousel option. Carousels are added with a unique id. The .carousel-inner class is used for adding items within the carousel class. Items are added within the carousel-item class. Add .active within any item class to make it visible. Otherwise, the carousel will not be visible. Use .d-block and w-100 to prevent browser default alignment. Let us look at the small example of how the carousel works.
Here is an example to create a Carousel using bootstrap 5.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 carousel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center"> Carousel slides </h2>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="c1.jfif" class="d-block w-100" alt="image1">
</div>
<div class="carousel-item">
<img src="c2.jfif" class="d-block w-100" alt="image2">
</div>
<div class="carousel-item">
<img src="c3.jfif" class="d-block w-100" alt="image3">
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Here is the output of the above code.
Adding Indicators in carousels
We can add indicators to the carousels. It is basically small dots at bottom of slides that give information about the total number of slides in the carousel and which slide the user is viewing.
Example: Adding indicators to a carousel
- The indicators are added to the ordered list with class .carousel-indicators.
- data-bs-target points to the id of the carousel.
- data-bs-slide-to tells where to go on clicking the dot.
Let us see an example to demonstrate indicators in the carousel.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 carousel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center"> Carousel slides with indicators </h2>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="c1.jfif" class="d-block w-100" alt="image1">
</div>
<div class="carousel-item">
<img src="c2.jfif" class="d-block w-100" alt="image2">
</div>
<div class="carousel-item">
<img src="c3.jfif" class="d-block w-100" alt="image3">
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Here is the output showing the carousel with an indicator.
Adding controls in the carousel
We have already seen how we can add indicators to our carousel. We can also add controls to the carousel. The controls will help to navigate the next or previous slides.
Example: Adding controls in the carousel
- Add .carousel-control-prev to the button class to slide previous slides. similarly, add .carousel-control-next to button class to slide to the next slides.
- data-bs-target points to the id of the carousel.
- .carousel-control-prev-icon and .carousel-control-next-icon adds the previous icons and next icons to the carousel respectively.
- Add Previous and Next
Here is the program demonstrating controls in the carousel.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 carousel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center"> Carousel slides with controls </h2>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="c1.jfif" class="d-block w-100" alt="image1">
</div>
<div class="carousel-item">
<img src="c2.jfif" class="d-block w-100" alt="image2">
</div>
<div class="carousel-item">
<img src="c3.jfif" class="d-block w-100" alt="image3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>
Output:
Here is the output for carousel controls.
Adding Captions in the carousel
A caption can be added to slides. The captions are used to add textual content related to the slides.
Example: Adding captions to the carousel element
- To add captions in the slide add .carousel-caption element within .carousel-item.
- .d-none d-md-block is the display utility class used to hide captions on the small screen device.
Let us see an example to illustrate this.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 5 carousel</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="text-center"> Carousel slides with captions </h2>
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="c1.jfif" class="d-block w-100" alt="image1">
<div class="carousel-caption d-none d-md-block">
<h5>First slide </h5>
<p>So we learnt how to add captions to slides.</p>
</div>
</div>
<div class="carousel-item">
<img src="c2.jfif" class="d-block w-100" alt="image2">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide </h5>
<p>So we learnt how to add captions to slides.</p>
</div>
</div>
<div class="carousel-item">
<img src="c3.jfif" class="d-block w-100" alt="image3">
<div class="carousel-caption d-none d-md-block ">
<h5>Third slide </h5>
<p>So we learnt how to add captions to slides.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Conclusion
So now we know how to add a carousel to our web page using bootstrap 5. Add series of images to your carousel. Customize it with indicators or control or both of them. Add relevant captions to each slide. Bootstrap provides you a faster and easier way to create carousel slides.
