What is Carousel slides and controls in Bootsrap?

Bootsrapmarkup~5 mins

Carousel slides and controls in Bootsrap

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

A carousel lets you show multiple images or content in one place by sliding them left or right. It saves space and makes your page look neat.

You want to display a photo gallery on a website homepage.

Showing product images one by one on an online store.

Highlighting different features or offers in a small area.

Creating a slideshow of testimonials or quotes.

Making a news ticker with headlines that slide automatically.

Syntax

Bootsrap

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <!-- Slide content here -->
    </div>
    <div class="carousel-item">
      <!-- Slide content here -->
    </div>
    <!-- More slides -->
  </div>
  <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>
</div>

The carousel-inner holds all slides.

Only one carousel-item should have the active class to show first.

Examples

This is a slide with an image. The active class shows it first.

Bootsrap

<div class="carousel-item active">
  <img src="image1.jpg" class="d-block w-100" alt="First slide">
</div>

This button moves the carousel to the next slide when clicked.

Bootsrap

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

The main container with an ID and classes to activate the carousel behavior.

Bootsrap

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <!-- slides and controls here -->
</div>

Sample Program

This example creates a simple carousel with three slides. Each slide shows a placeholder image with text. The left and right buttons let you move between slides. The carousel also starts sliding automatically.

Bootsrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Carousel Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <main class="container mt-5">
    <h1>Simple Image Carousel</h1>
    <div id="carouselExample" class="carousel slide" data-bs-ride="carousel" aria-label="Image Carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://via.placeholder.com/800x400?text=Slide+1" class="d-block w-100" alt="Slide 1">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400?text=Slide+2" class="d-block w-100" alt="Slide 2">
        </div>
        <div class="carousel-item">
          <img src="https://via.placeholder.com/800x400?text=Slide+3" class="d-block w-100" alt="Slide 3">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev" aria-label="Previous Slide">
        <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" aria-label="Next Slide">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

OutputSuccess

Important Notes

Always add alt text to images for accessibility.

Use aria-label and visually-hidden classes to help screen readers understand controls.

Make sure only one slide has the active class at a time.

Summary

A carousel shows multiple slides in one space by sliding them.

Use carousel-inner for slides and carousel-control-prev/next for navigation buttons.

Bootstrap handles the sliding animation and controls automatically.