Bootstrap 5 Carousel

Carousel/Slideshow

A carousel is a slideshow used to cycle through elements in a loop:

How to Create a Carousel

The following example shows how to create a basic carousel with indicators and controls:

Example

<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- Indicators/dots -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>
  <!-- Slides/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block w-100">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block w-100">
    </div>
  </div>
  <!-- Left controls/icon -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

Try It Yourself

Example Explanation

Description of the function of each class in the above example:

Class Description
.carousel Create a carousel.
.carousel-indicators Add indicators to the carousel. They are the small dots at the bottom of each slide.
Indicates how many slides are in the carousel and which slide the user is currently viewing.
.carousel-inner Add the slide to the carousel.
.carousel-item Define the content of each slide.
.carousel-control-prev Add a left (previous) button to the carousel, allowing users to navigate backward between slides.
.carousel-control-next Add a right (next) button to the carousel, allowing users to navigate forward between slides.
.carousel-control-prev-icon Used with .carousel-control-prev to create a 'Previous' button.
.carousel-control-next-icon Used with .carousel-control-next to create a 'Next' button.
.slide Add CSS transitions and animation effects when sliding from one item to the next.
If you do not want this effect, please delete this class.

Add a title for the slide

Please add a title for each <div class="carousel-item"> within <div class="carousel-caption"> Add elements inside, create a title for each slide:

Example

<div class="carousel-item">
  <img src="beijing.jpg" alt="Beijing">
  <div class="carousel-caption">
    <h3>Beijing</h3>
    <p>Thank you, Beijing!</p>
  </div>
</div>

Try It Yourself