# Carousel

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

Display multiple images or slides in a compact carousel with indicators, captions, and automatic or manual navigation.

Source: https://docs.tabler.io/ui/components/carousel

---

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

```html
<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:

```html
<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.

```html
<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.

```html
<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:

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

## Carousel with captions

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.

```html
<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.