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

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.

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

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

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

  
  
    
      
    
    
      
    
    
      
    
  
  
    
    Previous
  
  
    
    Next
  

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

  
    
    
    
  
  
    
      
    
    
      
    
    
      
    
  
  
    
    Previous
  
  
    
    Next
  

Need a hint?

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