Carousel indicators in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the carousel indicators container.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Anav

Bul

Csection

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using

or

instead of

for the indicators container.

Using

which is not correct for Bootstrap carousel indicators.

The carousel indicators container is a

element with class 'carousel-indicators'.

2fill in blank

medium

Complete the code to add the attribute that links each indicator button to the carousel.

Bootsrap

<button type="button" [1]="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>

Drag options to blanks, or click blank then click option'

Ahref

Bdata-bs-target

Cdata-bs-slide

Daria-controls

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'href' which is for links, not carousel buttons.

Using 'aria-controls' which is for accessibility but not the target link.

The 'data-bs-target' attribute links the button to the carousel's id.

3fill in blank

hard

Fix the error in the attribute that specifies which slide the button controls.

Bootsrap

<button type="button" data-bs-target="#carouselExampleIndicators" [1]="0" class="active" aria-current="true" aria-label="Slide 1"></button>

Drag options to blanks, or click blank then click option'

Adata-slide-to

Bdata-bs-slide

Cdata-bs-slide-to

Ddata-target

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data-slide-to' without 'bs-' prefix which is from older Bootstrap versions.

Using 'data-bs-slide' which controls slide direction, not index.

The correct attribute to specify the slide number is 'data-bs-slide-to'.

4fill in blank

hard

Fill both blanks to add the correct ARIA attributes for accessibility on the active indicator button.

Bootsrap

<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" [1]="true" [2]="Slide 1"></button>

Drag options to blanks, or click blank then click option'

Aaria-current

Baria-label

Caria-checked

Daria-hidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'aria-checked' which is for checkboxes, not carousel indicators.

Using 'aria-hidden' which hides elements from screen readers.

The active indicator uses 'aria-current="true"' and 'aria-label' to describe the slide.

5fill in blank

hard

Fill all three blanks to complete the carousel indicators with correct attributes and classes.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Aactive

BSlide 1

CSlide 2

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add 'active' class on the first button.

Using wrong aria-label text that doesn't match the slide number.

The first button is active with class 'active' and label 'Slide 1'; the second button label is 'Slide 2'.