Carousel

A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.

Default markup

Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.

<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="2"></button>
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="3"></button>
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="4"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="City Lights Reflected in the Water at Night" src="/samples/photos/city-lights-reflected-in-the-water-at-night.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Color Palette Guide Sample Colors Catalog" src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Finances US Dollars and Bitcoins" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Tropical Palm Leaves" src="/samples/photos/tropical-palm-leaves-floral-pattern-background.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Woman Working in a Cafe" src="/samples/photos/young-woman-working-in-a-cafe.jpg" />
    </div>
  </div>
  <a class="carousel-control-prev" data-bs-target="#carousel-sample" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" data-bs-target="#carousel-sample" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

Dots indicators

You can replace the standard indicators with dots. Just add the carousel-indicators-dot class to your carousel:

<div id="carousel-indicators-dot" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-indicators carousel-indicators-dot">
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="2"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="3"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="4"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="Stylish Workspace With Macbook Pro" src="/samples/photos/stylish-workspace-with-macbook-pro.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Coffee on a Table With Other Items" src="/samples/photos/coffee-on-a-table-with-other-items.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Book on the Grass" src="/samples/photos/book-on-the-grass.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="A Woman Works at a Desk With a Laptop an a Cup of Coffee" src="/samples/photos/a-woman-works-at-a-desk-with-a-laptop-and-a-cup-of-coffee.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="People by a Banquet Table Full With Foods" src="/samples/photos/people-by-a-banquet-table-full-with-food.jpg" />
    </div>
  </div>
</div>

Thumb indicators

The syntax is similar with thumbnails. Add class carousel-indicators-thumb and add background-image to element [data-bs-target]. Default thumbnails have an aspect ratio of 1:1. To change this use ratio utils.

<div id="carousel-indicators-thumb" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-indicators carousel-indicators-thumb">
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(...)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="1" class="ratio ratio-4x3" style="background-image: url(...)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="2" class="ratio ratio-4x3" style="background-image: url(...)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="3" class="ratio ratio-4x3" style="background-image: url(...)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="4" class="ratio ratio-4x3" style="background-image: url(...)"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="Group of People Sightseeing in the City" src="/samples/photos/group-of-people-sightseeing-in-the-city.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Young Woman Working in a Cafe" src="/samples/photos/young-woman-working-in-a-cafe.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Soft Photo of Woman on the Bed With the Book and Cup of Coffee" src="/samples/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Stylish Workplace With Computer at Home" src="/samples/photos/stylish-workplace-with-computer-at-home.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Stylish Workspace with Mackbook Pro" src="/samples/photos/stylish-workspace-with-macbook-pro.jpg" />
    </div>
  </div>
</div>

Vertical indicators

To make the indicators go to the right side, add the carousel-indicators-vertical class. You can combine it with other classes that are responsible for dots or thumbnails.

<div id="carousel-indicators-dot-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-dot">
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="2"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="3"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="4"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="Man Looking Out to Sea" src="/samples/photos/man-looking-out-to-sea.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Making Magic with Fairy Lights" src="/samples/photos/making-magic-with-fairy-lights.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Finances US Dollars and Bitcoins" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money-5.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Cup of Coffee on Table in Cafe" src="/samples/photos/cup-of-coffee-on-table-in-cafe-2.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Young Woman Sitting on the Sofa and Working on Her Laptop" src="/samples/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-2.jpg" />
    </div>
  </div>
</div>

Likewise, you can add thumbnails on the right side:

<div id="carousel-indicators-thumb-vertical" class="carousel slide carousel-fade" data-bs-ride="carousel">
  <div class="carousel-indicators carousel-indicators-vertical carousel-indicators-thumb">
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="0" class="ratio ratio-4x3 active" style="background-image: url(...)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="1" class="ratio ratio-4x3" style="background-image: url(...)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="2" class="ratio ratio-4x3" style="background-image: url(...)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="3" class="ratio ratio-4x3" style="background-image: url(...)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="4" class="ratio ratio-4x3" style="background-image: url(...)"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="Finances US Dollars and Bitcoins" src="/samples/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Businesswoman Working at Her Laptop" src="/samples/photos/businesswoman-working-at-her-laptop.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Color Palette Guide Sample Colors Catalog" src="/samples/photos/color-palette-guide-sample-colors-catalog-.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Blue Sofa with Pillows in a Designer Living Room Interior" src="/samples/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Beautiful Blonde Woman on a Wooden Pier by the Lake" src="/samples/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg" />
    </div>
  </div>
</div>

Carousel with captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. To make the text more readable on the image you can add carousel-caption-background which will add a black overlay over the image.

<div id="carousel-captions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="Workplace with Laptop on the Table at Home" src="/samples/photos/workplace-with-laptop-on-table-at-home-4.jpg" />
      <div class="carousel-caption-background d-none d-md-block"></div>
      <div class="carousel-caption d-none d-md-block">
        <h3>Slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="People Watching a Presentation in a Room" src="/samples/photos/people-watching-a-presentation-in-a-room.jpg" />
      <div class="carousel-caption-background d-none d-md-block"></div>
      <div class="carousel-caption d-none d-md-block">
        <h3>Slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="People by a Banquet Table Full with Food" src="/samples/photos/people-by-a-banquet-table-full-with-food.jpg" />
      <div class="carousel-caption-background d-none d-md-block"></div>
      <div class="carousel-caption d-none d-md-block">
        <h3>Slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Books and Purple Flowers on a Wooden Stool by the Bed" src="/samples/photos/books-and-purple-flowers-on-a-wooden-stool-by-the-bed.jpg" />
      <div class="carousel-caption-background d-none d-md-block"></div>
      <div class="carousel-caption d-none d-md-block">
        <h3>Slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="Cup of Coffee and an Open Book" src="/samples/photos/cup-of-coffee-and-an-open-book.jpg" />
      <div class="carousel-caption-background d-none d-md-block"></div>
      <div class="carousel-caption d-none d-md-block">
        <h3>Slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" data-bs-target="#carousel-captions" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" data-bs-target="#carousel-captions" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>