Carousel indicators in Bootsrap

Introduction

Carousel indicators help users see which slide is active and let them jump to any slide easily.

You want to show multiple images or content slides in one place.

You want users to control which slide they see quickly.

You want to improve navigation and user experience in a slideshow.

You want to show progress or position in a series of slides.

Syntax

Bootsrap

<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

Each button represents one slide indicator.

The data-bs-slide-to attribute sets which slide the button controls, starting at 0.

Examples

Two indicators for a carousel with two slides. The first is active.

Bootsrap

<div class="carousel-indicators">
  <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>

Four indicators for a carousel with four slides. Only the first is active.

Bootsrap

<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>

Sample Program

This example shows a Bootstrap carousel with three slides and indicators below. The indicators let you jump to any slide. The first indicator is active by default.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Carousel Indicators Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main>
    <section class="container mt-5">
      <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://via.placeholder.com/800x300?text=First+Slide" class="d-block w-100" alt="First slide image" />
          </div>
          <div class="carousel-item">
            <img src="https://via.placeholder.com/800x300?text=Second+Slide" class="d-block w-100" alt="Second slide image" />
          </div>
          <div class="carousel-item">
            <img src="https://via.placeholder.com/800x300?text=Third+Slide" class="d-block w-100" alt="Third slide image" />
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Important Notes

Always add aria-label to buttons for screen readers.

The active indicator must have class="active" and aria-current="true" for accessibility.

Make sure the data-bs-target matches the carousel's id.

Summary

Carousel indicators show which slide is active and let users pick slides.

Use button elements with data-bs-slide-to inside a carousel-indicators container.

Keep accessibility in mind with proper ARIA attributes.

Practice

1. What is the main purpose of carousel indicators in Bootstrap?

easy

A. To show which slide is active and allow users to select slides

B. To add captions to each slide

C. To control the speed of the carousel

D. To add navigation arrows to the carousel

Solution

1. Step 1: Understand the role of carousel indicators

   Carousel indicators are small buttons or dots that show which slide is currently visible.

2. Step 2: Identify user interaction purpose

   They also let users click to jump to a specific slide.

3. Final Answer:

   To show which slide is active and allow users to select slides -> Option A

4. Quick Check:

   Carousel indicators = show active slide + select slides [OK]

Hint: Indicators show active slide and let users pick slides [OK]

Common Mistakes:

• Confusing indicators with captions
• Thinking indicators control speed
• Mixing indicators with navigation arrows

2. Which HTML element is recommended for Bootstrap carousel indicators to ensure accessibility?

easy

A. <button>

B. <div>

C. <a>

D. <span>

Solution

1. Step 1: Identify accessible element for interaction

   Buttons are interactive elements that support keyboard and screen reader accessibility by default.

2. Step 2: Bootstrap documentation recommendation

   Bootstrap uses <button> elements for carousel indicators to ensure proper ARIA roles and keyboard focus.

3. Final Answer:

   <button> -> Option A

4. Quick Check:

   Use <button> for accessible carousel indicators [OK]

Hint: Use <button> for accessible clickable indicators [OK]

Common Mistakes:

• Using <div> which is not keyboard accessible
• Using <a> without href causing accessibility issues
• Using <span> which is not interactive

3. Given this snippet inside a Bootstrap carousel:

<div class="carousel-indicators">
  <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

What will happen when the second button is clicked?

medium

A. The carousel will move to the first slide

B. Nothing will happen because the button lacks a class

C. The carousel will move to the second slide

D. The carousel will move to the third slide

Solution

1. Step 1: Understand data-bs-slide-to attribute

   The attribute data-bs-slide-to="1" means the button targets the slide with index 1 (second slide, zero-based).

2. Step 2: Identify button click effect

   Clicking this button moves the carousel to the second slide regardless of class presence.

3. Final Answer:

   The carousel will move to the second slide -> Option C

4. Quick Check:

   data-bs-slide-to="1" moves to second slide [OK]

Hint: data-bs-slide-to index matches slide number starting at 0 [OK]

Common Mistakes:

• Confusing slide index starting at 1 instead of 0
• Thinking class 'active' is required for button to work
• Assuming no action without aria-current attribute

4. Identify the error in this carousel indicators code:

<div class="carousel-indicators">
  <button type="button" data-bs-slide-to="0" aria-label="Slide 1"></button>
  <button type="button" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

What is missing that will prevent the indicators from working properly?

medium

A. Missing class="active" on all buttons

B. Missing data-bs-target attribute on buttons

C. Missing type="submit" on buttons

D. Missing aria-current="true" on all buttons

Solution

1. Step 1: Check required attributes for carousel indicators

   Each indicator button must have data-bs-target pointing to the carousel's ID to link the button to the carousel.

2. Step 2: Identify missing attribute impact

   Without data-bs-target, Bootstrap cannot know which carousel to control, so indicators won't work.

3. Final Answer:

   Missing data-bs-target attribute on buttons -> Option B

4. Quick Check:

   data-bs-target links buttons to carousel [OK]

Hint: Always add data-bs-target to indicator buttons [OK]

Common Mistakes:

• Confusing data-bs-target with data-bs-slide-to
• Thinking type="submit" is needed
• Believing all buttons need class active

5. You want to create a carousel with 4 slides and indicators. Which is the correct way to mark the third indicator as active and accessible?

hard

A. <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" aria-label="Slide 3"></button>

B. <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="3" class="active" aria-current="true" aria-label="Slide 4"></button>

C. <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="3" aria-label="Slide 3"></button>

D. <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" class="active" aria-current="true" aria-label="Slide 3"></button>

Solution

1. Step 1: Understand zero-based slide indexing

   The third slide has index 2 because counting starts at 0 (0,1,2,3 for 4 slides).

2. Step 2: Identify correct attributes for active indicator

   The active indicator must have class="active" and aria-current="true" for accessibility.

3. Step 3: Match aria-label to slide number

   The aria-label should say "Slide 3" to match the third slide.

4. Final Answer:

   <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2" class="active" aria-current="true" aria-label="Slide 3"></button> -> Option D

5. Quick Check:

   Index 2 + active class + aria-current = correct active indicator [OK]

Hint: Active indicator uses zero-based index with class and aria-current [OK]

Common Mistakes:

• Using slide index 3 for third slide instead of 2
• Omitting aria-current for accessibility
• Not adding class active to active indicator