BBS5 Carousel

Learn how to create a carousel slideshow.

BS5 Carousel

The Carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript.

It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.

Carousel Indicators

Indicators are the little dots at the bottom of each slide that indicate how many slides there are, and which slide the user is currently viewing.

Carousel Controls

Controls are the previous and next buttons used to cycle through the slides.

Examples

Basic Carousel

html/css

A complete carousel with indicators and controls.

<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>
  
  <!-- The slideshow/carousel -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York" class="d-block" style="width:100%">
    </div>
  </div>
  
  <!-- Left and right controls/icons -->
  <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>

Carousel with Captions

html/css

Adding captions to slides.

<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles" class="d-block" style="width:100%">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>