Carousel slides and controls in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the main carousel container with the correct Bootstrap class.

Bootsrap

<div id="carouselExample" class="carousel [1]" data-bs-ride="carousel">
  <!-- Slides go here -->
</div>

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

Aslide

Bcarousel

Ccarousel-inner

Dcarousel-item

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'carousel-inner' or 'carousel-item' on the main container instead of 'carousel'.

Forgetting to add any carousel class.

The main container for a Bootstrap carousel must have the class carousel to work properly.

2fill in blank

medium

Complete the code to wrap all slides inside the correct inner container.

Bootsrap

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="[1]">
    <!-- Individual slides go here -->
  </div>
</div>

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

Acarousel-inner

Bcarousel-item

Ccarousel-control

Dcarousel-slide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'carousel-item' for the container instead of individual slides.

Using 'carousel-control' which is for buttons, not slides.

The slides must be wrapped inside a div with class carousel-inner for Bootstrap to recognize the slide container.

3fill in blank

hard

Fix the error in the slide item class to make the first slide active.

Bootsrap

<div class="carousel-inner">
  <div class="carousel-item [1]">
    <img src="slide1.jpg" class="d-block w-100" alt="Slide 1">
  </div>
</div>

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

Aactive

Bshow

Ccarousel-active

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'show' or 'visible' which do not activate the slide.

Using a non-existent class like 'carousel-active'.

The first slide must have the class active to be visible when the carousel loads.

4fill in blank

hard

Fill both blanks to add previous and next control buttons with correct classes.

Bootsrap

<button class="carousel-control-[1]" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
  <span class="carousel-control-[2]-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>

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

Aprev

Bnext

Ccontrol

Dslide

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing 'prev' and 'next' classes incorrectly.

Using 'control' or 'slide' which are not valid suffixes here.

The previous button uses the class carousel-control-prev and the icon uses carousel-control-prev-icon.

5fill in blank

hard

Fill all three blanks to add the next control button with correct classes and attributes.

Bootsrap

<button class="carousel-control-[1]" type="button" data-bs-target="#carouselExample" data-bs-slide="[2]">
  <span class="carousel-control-[3]-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

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

Aprev

Bnext

Dcontrol

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'prev' instead of 'next' for the next button.

Using 'control' which is not a valid suffix here.

The next button uses carousel-control-next for the button class, next for the slide attribute, and carousel-control-next-icon for the icon.

Practice

1. What is the main purpose of the .carousel-control-prev and .carousel-control-next classes in a Bootstrap carousel?

easy

A. They automatically start the carousel animation.

B. They style the carousel indicators at the bottom.

C. They add captions to each slide.

D. They create buttons to move slides backward and forward.

Solution

1. Step 1: Understand carousel controls

   The classes .carousel-control-prev and .carousel-control-next are used to create navigation buttons on the left and right sides of the carousel.

2. Step 2: Identify their function

   These buttons allow users to manually move the slides backward (previous) or forward (next) in the carousel.

3. Final Answer:

   They create buttons to move slides backward and forward. -> Option D

4. Quick Check:

   Carousel controls = navigation buttons [OK]

Hint: Controls always move slides left or right [OK]

Common Mistakes:

• Confusing controls with indicators
• Thinking controls add captions
• Assuming controls start animation automatically

2. Which of the following is the correct HTML structure to add a previous control button in a Bootstrap 5 carousel?

easy

A. Previous

B. Prev

C. Prev

D. Back

Solution

1. Step 1: Check Bootstrap 5 control button syntax

   The correct control button uses button with class carousel-control-prev, attributes data-bs-target and data-bs-slide="prev", and includes an icon span and a visually hidden label for accessibility.

2. Step 2: Compare options

   Previous matches the official Bootstrap 5 syntax exactly. Other options use incorrect classes, tags, or attributes.

3. Final Answer:

   Option A is the correct Bootstrap 5 previous control button structure. -> Option A

4. Quick Check:

   Bootstrap 5 controls use button with data-bs-slide [OK]

Hint: Look for data-bs-slide="prev" and correct classes [OK]

Common Mistakes:

• Using old Bootstrap 4 attributes like data-slide
• Missing aria-hidden or visually-hidden spans
• Using wrong element tags like <a> or <div>

3. Given this Bootstrap carousel snippet, what will happen when the user clicks the next control button?

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">Slide 1</div>
    <div class="carousel-item">Slide 2</div>
    <div class="carousel-item">Slide 3</div>
  </div>
  <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>

medium

A. The carousel will move from Slide 1 to Slide 2.

B. The carousel will jump directly to Slide 3.

C. Nothing will happen because the next button is missing the target.

D. The carousel will restart from Slide 1.

Solution

1. Step 1: Identify the active slide and next button action

   The active slide is Slide 1. The next button has data-bs-slide="next" and targets the carousel by ID.

2. Step 2: Understand carousel behavior on next click

   Clicking next moves the carousel forward by one slide, so it moves from Slide 1 to Slide 2.

3. Final Answer:

   The carousel will move from Slide 1 to Slide 2. -> Option A

4. Quick Check:

   Next button moves one slide forward [OK]

Hint: Next button moves active slide forward by one [OK]

Common Mistakes:

• Thinking next jumps to last slide
• Assuming missing target disables button
• Confusing next with restart behavior

4. This Bootstrap carousel control button does not work as expected. What is the error?

<button class="carousel-control-prev" type="button" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>

medium

A. The button tag should be an anchor <a> tag.

B. Wrong class name; should be carousel-prev-control.

C. Missing data-bs-target attribute to specify the carousel ID.

D. Missing aria-label attribute on the button.

Solution

1. Step 1: Check required attributes for carousel controls

   Bootstrap carousel control buttons must have data-bs-target to link the button to the carousel's ID.

2. Step 2: Identify missing attribute in the code

   The given button lacks data-bs-target="#carouselID", so it cannot control any carousel.

3. Final Answer:

   Missing data-bs-target attribute to specify the carousel ID. -> Option C

4. Quick Check:

   Controls need data-bs-target to work [OK]

Hint: Always include data-bs-target with carousel ID [OK]

Common Mistakes:

• Omitting data-bs-target attribute
• Using wrong class names
• Confusing button with anchor tag requirement

5. You want to create a Bootstrap carousel with 4 slides and add controls that loop infinitely. Which combination of attributes and classes ensures the carousel loops and controls work correctly?

<div id="myCarousel" class="carousel slide" ... >
  <div class="carousel-inner">
    <div class="carousel-item active">Slide 1</div>
    <div class="carousel-item">Slide 2</div>
    <div class="carousel-item">Slide 3</div>
    <div class="carousel-item">Slide 4</div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">...</button>
  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">...</button>
</div>

hard

A. Add data-bs-interval="false" to stop auto sliding; controls loop automatically.

B. Add data-bs-ride="carousel" to the main div; controls with correct data-bs-target enable infinite looping.

C. Add data-bs-wrap="false" to disable looping; controls will loop slides.

D. No extra attributes needed; controls loop slides by default.

Solution

1. Step 1: Enable automatic cycling and looping

   Adding data-bs-ride="carousel" starts the carousel automatically and enables looping by default.

2. Step 2: Ensure controls target the correct carousel

   Controls must have data-bs-target="#myCarousel" and data-bs-slide attributes to move slides properly.

3. Step 3: Understand looping behavior

   Bootstrap carousels loop infinitely by default when data-bs-ride="carousel" is present, so no extra attribute is needed to enable looping.

4. Final Answer:

   Add data-bs-ride="carousel" to the main div; controls with correct data-bs-target enable infinite looping. -> Option B

5. Quick Check:

   data-bs-ride="carousel" + correct controls = infinite loop [OK]

Hint: Use data-bs-ride="carousel" for looping with controls [OK]

Common Mistakes:

• Using data-bs-wrap="false" disables looping
• Assuming controls loop without data-bs-ride
• Setting data-bs-interval="false" stops auto sliding