Menu

⌘K
View as markdownAsk ChatGPTAsk Claude

Carousel

A carousel shows several images or slides in the space of one, with arrows, indicators and captions.

Default markup

The default carousel slides on its own and has an arrow on each side for going to the previous or the next slide.

<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" aria-label="Slide 1" aria-current="true" class="active"></button>
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="3" aria-label="Slide 4"></button>
    <button type="button" data-bs-target="#carousel-sample" data-bs-slide-to="4" aria-label="Slide 5"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt src="/static/photos/city-lights-reflected-in-the-water-at-night.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/color-palette-guide-sample-colors-catalog-.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/tropical-palm-leaves-floral-pattern-background.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/young-woman-working-in-a-cafe.jpg" />
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carousel-sample" 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="#carousel-sample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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" aria-label="Slide 1" aria-current="true" class="active"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="3" aria-label="Slide 4"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot" data-bs-slide-to="4" aria-label="Slide 5"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt src="/static/photos/stylish-workspace-with-macbook-pro.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/coffee-on-a-table-with-other-items.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/book-on-the-grass.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/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 src="/static/photos/people-by-a-banquet-table-full-with-food.jpg" />
    </div>
  </div>
</div>

Thumb indicators

Thumbnails work the same way. Add the carousel-indicators-thumb class and set a background-image on each [data-bs-target] element. Thumbnails are square by default; change that with the ratio utilities.

<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" aria-label="Slide 1" aria-current="true" class="ratio ratio-4x3 active" style="background-image: url(/static/photos/group-of-people-sightseeing-in-the-city.jpg)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="1" aria-label="Slide 2" class="ratio ratio-4x3" style="background-image: url(/static/photos/young-woman-working-in-a-cafe.jpg)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="2" aria-label="Slide 3" class="ratio ratio-4x3" style=" background-image: url(/static/photos/soft-photo-of-woman-on-the-bed-with-the-book-and-cup-of-coffee-in-hands.jpg); "></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="3" aria-label="Slide 4" class="ratio ratio-4x3" style="background-image: url(/static/photos/stylish-workplace-with-computer-at-home.jpg)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb" data-bs-slide-to="4" aria-label="Slide 5" class="ratio ratio-4x3" style="background-image: url(/static/photos/stylish-workspace-with-macbook-pro.jpg)"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt src="/static/photos/group-of-people-sightseeing-in-the-city.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/young-woman-working-in-a-cafe.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/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 src="/static/photos/stylish-workplace-with-computer-at-home.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/stylish-workspace-with-macbook-pro.jpg" />
    </div>
  </div>
</div>

Vertical indicators

Add the carousel-indicators-vertical class to stack the indicators on the right side. It combines with the dot and thumbnail classes.

<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" aria-label="Slide 1" aria-current="true" class="active"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="3" aria-label="Slide 4"></button>
    <button type="button" data-bs-target="#carousel-indicators-dot-vertical" data-bs-slide-to="4" aria-label="Slide 5"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt src="/static/photos/man-looking-out-to-sea.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/making-magic-with-fairy-lights.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/finances-us-dollars-and-bitcoins-currency-money-5.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/cup-of-coffee-on-table-in-cafe-2.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/young-woman-sitting-on-the-sofa-and-working-on-her-laptop-2.jpg" />
    </div>
  </div>
</div>

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" aria-label="Slide 1" aria-current="true" class="ratio ratio-4x3 active" style=" background-image: url(/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg); "></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="1" aria-label="Slide 2" class="ratio ratio-4x3" style="background-image: url(/static/photos/businesswoman-working-at-her-laptop.jpg)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="2" aria-label="Slide 3" class="ratio ratio-4x3" style="background-image: url(/static/photos/color-palette-guide-sample-colors-catalog-.jpg)"></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="3" aria-label="Slide 4" class="ratio ratio-4x3" style=" background-image: url(/static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg); "></button>
    <button type="button" data-bs-target="#carousel-indicators-thumb-vertical" data-bs-slide-to="4" aria-label="Slide 5" class="ratio ratio-4x3" style=" background-image: url(/static/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg); "></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt src="/static/photos/finances-us-dollars-and-bitcoins-currency-money.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/businesswoman-working-at-her-laptop.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/color-palette-guide-sample-colors-catalog-.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/blue-sofa-with-pillows-in-a-designer-living-room-interior.jpg" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt src="/static/photos/beautiful-blonde-woman-on-a-wooden-pier-by-the-lake.jpg" />
    </div>
  </div>
</div>

Put a .carousel-caption element inside a .carousel-item to add a caption. Add carousel-caption-background to lay a dark overlay over the image, so light text stays readable.

The captions in this example have the d-none class, so they are hidden below the md breakpoint.

<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 src="/static/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 src="/static/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 src="/static/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 src="/static/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 src="/static/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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carousel-captions" 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="#carousel-captions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Accessibility

  • Use button for the previous and next controls. An a without href cannot take focus, so the carousel becomes mouse-only.
  • Give every indicator an aria-label such as Slide 3, and mark the current one with aria-current="true". Without a label a screen reader announces only "button".
  • A carousel that plays on its own moves content out from under the reader. Set data-bs-ride="false" or give users a pause control. Bootstrap already pauses on hover and on focus.
  • Keep the slide images meaningful in alt text, or leave alt="" when the caption already says the same thing.
  • Bootstrap does not move focus when a slide changes, so anything focusable inside a hidden slide is still reachable by keyboard. Keep interactive content out of carousel slides.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

carousel componentContainer element
carousel-inner partWrapper around the slides
carousel-item partOne slide
carousel-caption partText block over a slide
carousel-indicators partRow of buttons that jump to a slide
carousel-control-prev partPrevious control; use a button so it can take focus
carousel-control-next partNext control
carousel-caption-background styleAdds a scrim behind the caption
carousel-indicators-dot styleRound dot indicators
carousel-indicators-thumb styleThumbnail indicators
carousel-indicators-vertical styleStacks the indicators down the side
carousel-fade behaviorCrossfades between slides instead of sliding

CSS

Sass variables

Override these variables before importing Tabler to change the defaults. Source: core/scss/_variables.scss.

$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: 0.5;
$carousel-control-hover-opacity: 0.9;
$carousel-control-transition: opacity 0.15s ease;
$carousel-control-icon-filter: null;
$carousel-control-icon-width: 1.5rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>");

$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: 0.5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity 0.6s ease;
$carousel-indicator-thumb-opacity: 0.75;
$carousel-indicator-thumb-width: 4rem;
$carousel-indicator-dot-width: 0.5rem;

$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;

$carousel-transition-duration: 0.6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out;

$carousel-dark-indicator-active-bg: $black; // Deprecated in v5.3.4
$carousel-dark-caption-color: $black; // Deprecated in v5.3.4
$carousel-dark-control-icon-filter: invert(1) grayscale(100); // Deprecated in v5.3.4
$carousel-indicators-vertical-margin-inline-end: 1rem;
Inline player

Embed audio and video with a lightweight, accessible media player that supports HTML5, YouTube, and Vimeo sources.

On this page

Get Admin Template, Icons, Illustrations and Emails in one bundle.

Tabler All Package — one purchase, every premium product.