Bird
Raised Fist0
Bootsrapmarkup~30 mins

Carousel slides and controls in Bootsrap - Mini Project: Build & Apply

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Bootstrap Carousel Slides and Controls
📖 Scenario: You are creating a simple image carousel for a website homepage. The carousel will show three images that users can slide through using controls.
🎯 Goal: Build a Bootstrap carousel with three slides and navigation controls to move between slides.
📋 What You'll Learn
Use Bootstrap 5 carousel structure
Create three carousel items with images
Add previous and next controls
Ensure the carousel is accessible with proper aria labels
Make the carousel responsive
💡 Why This Matters
🌍 Real World
Carousels are common on websites to showcase images, products, or promotions in a small space with user-friendly navigation.
💼 Career
Knowing how to implement accessible and responsive carousels is valuable for front-end developers working on modern websites and user interfaces.
Progress0 / 4 steps
1
Create the basic carousel structure with three slides
Create a div with class carousel slide and id myCarousel. Inside it, add a div with class carousel-inner containing three div elements with class carousel-item. The first carousel-item should also have the class active. Inside each carousel-item, add an img tag with src attributes set to image1.jpg, image2.jpg, and image3.jpg respectively, and alt attributes describing the images as Slide 1, Slide 2, and Slide 3.
Bootsrap
Hint

Remember the first slide needs the active class to show initially.

2
Add carousel controls for previous and next navigation
Below the carousel-inner div, add two button elements for controls. The first button should have classes carousel-control-prev and type="button", with data-bs-target="#myCarousel" and data-bs-slide="prev". Inside it, add a span with class carousel-control-prev-icon and aria-hidden="true", and a span with class visually-hidden containing the text Previous. The second button is similar but uses carousel-control-next, data-bs-slide="next", and text Next.
Bootsrap
Hint

Make sure the buttons have the correct data-bs-target and data-bs-slide attributes.

3
Add carousel indicators for slide navigation
Above the carousel-inner div, add a div with class carousel-indicators. Inside it, add three button elements. Each button should have type="button", data-bs-target="#myCarousel", and data-bs-slide-to attributes set to 0, 1, and 2 respectively. The first button should also have the class active and aria-current="true". All buttons should have aria-label attributes set to Slide 1, Slide 2, and Slide 3.
Bootsrap
Hint

Indicators help users jump to a specific slide. The first indicator must be active.

4
Add responsive and accessibility enhancements
Add the class d-block w-100 to all img tags inside the carousel items to make images responsive. Ensure all button controls and indicators have appropriate aria-label attributes for accessibility. Confirm the carousel has the role="region" attribute and aria-label="Image Carousel" on the main div with id myCarousel.
Bootsrap
Hint

Adding role="region" and aria-label helps screen readers understand the carousel area.

Practice

(1/5)
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.
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

    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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard