Carousel slides and controls in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

Identify the active slide in a Bootstrap carousel

Given the following Bootstrap carousel HTML snippet, which slide will be visible first when the page loads?

Bootsrap

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item">
      <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
    </div>
    <div class="carousel-item active">
      <img src="slide2.jpg" class="d-block w-100" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="slide3.jpg" class="d-block w-100" alt="Slide 3">
    </div>
  </div>
</div>

A Slide 2 will be visible first because it has the class 'active'.

B No slide will be visible because none have the 'show' class.

C Slide 3 will be visible first because it is the last item in the list.

D Slide 1 will be visible first because it is the first item in the list.

💡 Hint

Look for the 'active' class inside the carousel items.

In Bootstrap carousels, the slide with the active class is the one shown first. Here, Slide 2 has the active class, so it will be visible initially.

📝 Syntax

intermediate

Which code correctly adds previous and next controls to a Bootstrap carousel?

You want to add controls to navigate slides in a Bootstrap carousel. Which option correctly implements the previous and next buttons?

A

<button class="carousel-prev" type="button" data-target="#carouselExample" data-slide="prev">
  <span class="carousel-prev-icon"></span>
</button>
<button class="carousel-next" type="button" data-target="#carouselExample" data-slide="next">
  <span class="carousel-next-icon"></span>
</button>

B

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

C

<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>

D

<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="previous">
  <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>

💡 Hint

Check the attribute names and values for Bootstrap 5 controls.

Bootstrap 5 uses data-bs-target and data-bs-slide attributes on button elements for carousel controls. The values must be exactly 'prev' and 'next'. Also, aria-hidden and visually-hidden classes are used for accessibility.

❓ selector

advanced

Which CSS selector targets only the active slide in a Bootstrap carousel?

You want to style only the currently visible slide in a Bootstrap carousel. Which CSS selector will select only the active slide?

A .carousel .active-item

B .carousel-item:active

C .carousel-item > .active

D .carousel-item.active

💡 Hint

Look for the class that Bootstrap adds to the visible slide.

Bootstrap adds the active class to the currently visible slide. The correct selector is .carousel-item.active which selects elements with both classes.

❓ layout

advanced

How to make carousel images fully responsive and cover the slide area?

You want carousel images to fill the entire slide area without distortion and keep their aspect ratio. Which CSS approach achieves this best?

A Use <code>max-width: 100%; max-height: 100%;</code> on images.

B Use <code>width: 100%; height: auto;</code> on images.

C Use <code>object-fit: cover; width: 100%; height: 100%;</code> on images.

D Use <code>float: left; width: 100%;</code> on images.

💡 Hint

Think about how to crop images to fill a container while preserving aspect ratio.

object-fit: cover; makes images fill their container by cropping excess parts, preserving aspect ratio. Combined with width: 100%; height: 100%;, it ensures full coverage without distortion.

❓ accessibility

expert

Which attribute improves screen reader accessibility for carousel controls?

Bootstrap carousel controls include icons but no visible text. Which attribute and element combination ensures screen readers announce the control purpose correctly?

A Add <code>aria-label="Previous slide"</code> to the control button and include a <code>&lt;span class="visually-hidden"&gt;Previous&lt;/span&gt;</code> inside.

B Add <code>title="Previous"</code> to the control button only.

C Add <code>alt="Previous"</code> to the icon span inside the button.

D Add <code>role="button"</code> to the icon span inside the button.

💡 Hint

Screen readers need hidden descriptive text or aria-labels on interactive elements.

Using aria-label on the button and a span with visually-hidden class inside provides clear, accessible text for screen readers without showing it visually.