Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
communitycreator

What is carousel in Bootstrap?

Hammad Qayyum

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>

RELATED TAGS

bootstrap
communitycreator
RELATED COURSES

View all Courses

Keep Exploring