What is carousel in Bootstrap?

In Bootstrap, the component carousel is used for cycling through images or slides of a text. It is used for cycling through the series of content with the help of other CSS transitions and designs.

carousel uses CSS and JavaScript attributes to work. It requires a series of images or slides of text. It also has several other features, like moving to the next or previous slides, or adding descriptions or text to images and slides.

Examples

There are three main types of carousel displays. It can show slides only, or it can show control and/or indicators with the slides. We need to add some unique IDs to the division to add controls and indicators.

1. Slides only

Here is the code for the carousel with only slides.

<div id="example" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="" alt="1">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="" alt="2">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="" alt="3">
    </div>
  </div>
</div>

2. Adding controls

Here is the code for the carousel with slides and controls. We can add this to the previous code.

  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

3. Adding indicators

Here is the code for the carousel with slides and controls and indicators. We can add this to the previous code.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
</div>

We can also add captions to our slides. The following code shows that we can use the carousel-caption Bootstrap class to add captions.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>
Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)