Carousel indicators in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the role of carousel indicators in Bootstrap?

In a Bootstrap carousel, what is the main purpose of the indicators shown below the slides?

A They add captions to each slide for accessibility.

B They automatically change the slide speed based on user interaction.

C They show which slide is currently active and allow users to jump to any slide.

D They control the carousel's autoplay pause and resume functions.

💡 Hint

Think about what the small dots below a carousel do when clicked.

Carousel indicators are small buttons or dots that show which slide is active. Users can click them to jump directly to a specific slide.

📝 Syntax

intermediate

Identify the correct Bootstrap carousel indicator syntax

Which of the following code snippets correctly creates carousel indicators for a Bootstrap carousel with 3 slides?

A

<ul class="carousel-indicators">
  <li data-target="#carouselExample" data-slide-to="0" class="active"></li>
  <li data-target="#carouselExample" data-slide-to="1"></li>
  <li data-target="#carouselExample" data-slide-to="2"></li>
</ul>

B

<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>

C

<div class="carousel-indicators">
  <button data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
  <button data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
  <button data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
</div>

D

<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" 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>

💡 Hint

Bootstrap 5 uses

Option B uses the correct button elements with data-bs-target and data-bs-slide-to attributes, includes aria-label for accessibility, and marks the first button as active with class="active" and aria-current="true".

❓ rendering

advanced

What will be the visual effect of missing the 'active' class on carousel indicators?

If none of the carousel indicator buttons have the 'active' class, what will the user see when the carousel loads?

A The carousel will not function and will throw a JavaScript error.

B The first indicator will be highlighted by default even without the 'active' class.

C All indicators will be highlighted, confusing the user.

D No indicator will appear highlighted, so users won't know which slide is active.

💡 Hint

Think about how CSS highlights the active indicator.

The 'active' class visually highlights the current slide's indicator. Without it, no indicator looks active, so users can't tell which slide is showing.

❓ selector

advanced

Which CSS selector targets only the active carousel indicator button?

Given Bootstrap carousel indicators, which CSS selector correctly styles only the active indicator button?

A .carousel-indicators button.active

B .carousel-indicators > button

C .carousel-indicators button[aria-current="true"]

D .carousel-indicators button:focus

💡 Hint

The active indicator has a specific class assigned to it.

The active indicator button has the class 'active', so the selector '.carousel-indicators button.active' targets it specifically.

❓ accessibility

expert

Which attribute is essential for screen readers on carousel indicators?

For carousel indicators to be accessible, which attribute must each indicator button include to describe its purpose to screen readers?

A aria-label

B tabindex="-1"

C role="presentation"

D aria-hidden

💡 Hint

This attribute provides a text description for screen readers.

The aria-label attribute gives a descriptive label to each indicator button, such as 'Slide 1', so screen readers can announce it properly.