Search⌘ K
AI Features
Home
Courses
Modern Web Design Using Bootstrap 5 with Hands-On Projects

Carousels

Explore how to build and customize carousels in Bootstrap 5, including setting up the layout, adding slide indicators and navigation controls, and incorporating captions. Understand how to use key classes and JavaScript attributes to create engaging, user-friendly slideshow components for your responsive websites.

We'll cover the following...

The carousel is a slideshow for cycling through a series of content. It is built with CSS 3D transforms and a bit of JavaScript. We might encounter carousels when we visit websites, especially e-commerce sites.

Carousels are very attractive and catch the user’s attention. Implementing a carousel using Bootstrap is incredibly easy. Let’s see how we can build carousels.

Layout

We can build a carousel using the following layout.

C++
<div class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active ">
            <img src="..." class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="..." class="d-block w-100">
        </div>
    </div>
</div>

In the code above, we have a parent <div> with .carousel and .slide classes, and a data-bs-ride argument with the .carousel value. Inside that <div>, we have our content in the .carousel-inner class. The first ...