Carousel

Carousels cycle through images or other content. Add controls with data-ui-slide, indicators with data-ui-slide-to, captions, a fade transition or the dark variant, and start autoplay with data-ui-ride="carousel". Keep slides few and meaningful.

1Slides only

The simplest carousel: slides that cycle automatically, without controls.

<div id="carousel-881" class="carousel slide" data-ui-ride="carousel">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/photo-1.svg" class="d-block w-100" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-2.svg" class="d-block w-100" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-3.svg" class="d-block w-100" alt="Third slide">
    </div>
  </div>
</div>

2With controls

Previous and next buttons with data-ui-slide.

<div id="carousel-882" class="carousel slide">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/photo-4.svg" class="d-block w-100" alt="Slide one">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-5.svg" class="d-block w-100" alt="Slide two">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-6.svg" class="d-block w-100" alt="Slide three">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-882" data-ui-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-ui-target="#carousel-882" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

3With indicators

Indicator buttons with data-ui-slide-to jump straight to a slide.

<div id="carousel-883" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-ui-target="#carousel-883" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-ui-target="#carousel-883" data-ui-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-ui-target="#carousel-883" data-ui-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/photo-7.svg" class="d-block w-100" alt="Slide one">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-8.svg" class="d-block w-100" alt="Slide two">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-9.svg" class="d-block w-100" alt="Slide three">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-883" data-ui-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-ui-target="#carousel-883" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

4With captions

carousel-caption adds a heading and text over each slide (hidden on phones).

Live order tracking

Our secure checkout shows complex tasks into simple steps without the usual hassle.

Free shipping

Our gift wrapping connects time back in your day from the very first day.

30-day returns

The new easy exchanges connects complex tasks into simple steps for teams of every size.

<div id="carousel-884" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-ui-target="#carousel-884" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-ui-target="#carousel-884" data-ui-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-ui-target="#carousel-884" data-ui-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/photo-10.svg" class="d-block w-100" alt="Live order tracking">
      <div class="carousel-caption d-none d-md-block">
        <h5>Live order tracking</h5>
        <p>Our secure checkout shows complex tasks into simple steps without the usual hassle.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-11.svg" class="d-block w-100" alt="Live order tracking">
      <div class="carousel-caption d-none d-md-block">
        <h5>Free shipping</h5>
        <p>Our gift wrapping connects time back in your day from the very first day.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-12.svg" class="d-block w-100" alt="Loyalty rewards">
      <div class="carousel-caption d-none d-md-block">
        <h5>30-day returns</h5>
        <p>The new easy exchanges connects complex tasks into simple steps for teams of every size.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-884" data-ui-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-ui-target="#carousel-884" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

5Crossfade

carousel-fade fades between slides instead of sliding.

<div id="carousel-885" class="carousel slide carousel-fade">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/photo-2.svg" class="d-block w-100" alt="Fade one">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-4.svg" class="d-block w-100" alt="Fade two">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-6.svg" class="d-block w-100" alt="Fade three">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-885" data-ui-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-ui-target="#carousel-885" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

6Autoplay

data-ui-ride="carousel" starts cycling on page load; hovering pauses it.

<div id="carousel-886" class="carousel slide" data-ui-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-ui-target="#carousel-886" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-ui-target="#carousel-886" data-ui-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-ui-target="#carousel-886" data-ui-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-ui-target="#carousel-886" data-ui-slide-to="3" aria-label="Slide 4"></button>
  </div>
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/wide-1.svg" class="d-block w-100" alt="Autoplay one">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-2.svg" class="d-block w-100" alt="Autoplay two">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-3.svg" class="d-block w-100" alt="Autoplay three">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-4.svg" class="d-block w-100" alt="Autoplay four">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-886" data-ui-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-ui-target="#carousel-886" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

7Per-slide interval

data-ui-interval on each item sets how long that slide stays (in ms).

8 seconds

3 seconds

Default 5 seconds

<div id="carousel-887" class="carousel slide" data-ui-ride="carousel">
  <div class="carousel-inner rounded">
    <div class="carousel-item active" data-ui-interval="8000">
      <img src="../assets/img/photo-3.svg" class="d-block w-100" alt="Shown for 8 seconds">
      <div class="carousel-caption d-none d-md-block">
        <p class="mb-0">8 seconds</p>
      </div>
    </div>
    <div class="carousel-item" data-ui-interval="3000">
      <img src="../assets/img/photo-5.svg" class="d-block w-100" alt="Shown for 3 seconds">
      <div class="carousel-caption d-none d-md-block">
        <p class="mb-0">3 seconds</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-7.svg" class="d-block w-100" alt="Default interval">
      <div class="carousel-caption d-none d-md-block">
        <p class="mb-0">Default 5 seconds</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-887" data-ui-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-ui-target="#carousel-887" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

8Dark variant

data-ui-theme="dark" gives dark controls, indicators and captions for light images.

Clear project

A bright journey keeps results you can measure at a fair price.

Bright launch

Our loyalty rewards guides you focused on what matters in just a few clicks.

Bright launch

Our free shipping guides new ideas to life without the usual hassle.

<div id="carousel-888" class="carousel slide" data-ui-theme="dark">
  <div class="carousel-indicators">
    <button type="button" data-ui-target="#carousel-888" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-ui-target="#carousel-888" data-ui-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-ui-target="#carousel-888" data-ui-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner rounded border">
    <div class="carousel-item active">
      <img src="../assets/img/square-1.svg" class="d-block w-100" alt="Light slide one">
      <div class="carousel-caption d-none d-md-block">
        <h5>Clear project</h5>
        <p>A bright journey keeps results you can measure at a fair price.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/square-2.svg" class="d-block w-100" alt="Light slide two">
      <div class="carousel-caption d-none d-md-block">
        <h5>Bright launch</h5>
        <p>Our loyalty rewards guides you focused on what matters in just a few clicks.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/square-3.svg" class="d-block w-100" alt="Light slide three">
      <div class="carousel-caption d-none d-md-block">
        <h5>Bright launch</h5>
        <p>Our free shipping guides new ideas to life without the usual hassle.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-888" data-ui-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-ui-target="#carousel-888" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

9Hero banner

Wide slides with left-aligned headline and call to action, shown on all screen sizes.

Quality goods delivered to your door

This fast project connects data easy to understand wherever you are.

Get started

New season, new favourites

This flexible story guides time back in your day with friendly support.

See features

Everyday essentials, beautifully made

This reliable update lets time back in your day without extra tools.

View pricing

<div id="hero-889" class="carousel slide carousel-fade ca-hero-car" data-ui-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-ui-target="#hero-889" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-ui-target="#hero-889" data-ui-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-ui-target="#hero-889" data-ui-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner rounded-3">
    <div class="carousel-item active">
      <img src="../assets/img/wide-5.svg" class="d-block w-100" alt="Banner 1">
      <div class="carousel-caption text-start">
        <h3 class="fw-bold">Quality goods delivered to your door</h3>
        <p class="d-none d-sm-block">This fast project connects data easy to understand wherever you are.</p>
        <a href="#" class="btn btn-primary">Get started</a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-6.svg" class="d-block w-100" alt="Banner 2">
      <div class="carousel-caption text-start">
        <h3 class="fw-bold">New season, new favourites</h3>
        <p class="d-none d-sm-block">This flexible story guides time back in your day with friendly support.</p>
        <a href="#" class="btn btn-primary">See features</a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-7.svg" class="d-block w-100" alt="Banner 3">
      <div class="carousel-caption text-start">
        <h3 class="fw-bold">Everyday essentials, beautifully made</h3>
        <p class="d-none d-sm-block">This reliable update lets time back in your day without extra tools.</p>
        <a href="#" class="btn btn-primary">View pricing</a>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#hero-889" data-ui-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-ui-target="#hero-889" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

10No touch swiping

data-ui-touch="false" turns off swipe, useful when slides contain draggable content.

<div id="carousel-890" class="carousel slide" data-ui-touch="false">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/photo-8.svg" class="d-block w-100" alt="Map view">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-9.svg" class="d-block w-100" alt="Satellite view">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-890" data-ui-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-ui-target="#carousel-890" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

11Testimonial slider

Text-only slides with customer quotes; dark controls sit on the light panel.

“This clear experience lets you focused on what matters wherever you are.”

Felix Silva

Data Analyst

“A friendly process keeps new ideas to life all year round.”

Samir Brennan

Project Manager

“The new hand-checked quality keeps the whole team on the same page for teams of every size.”

Sofia Whitaker

Frontend Engineer

<div id="quotes-891" class="carousel slide bg-light rounded-3 py-4" data-ui-theme="dark" data-ui-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="text-center px-5 mx-auto" style="max-width: 560px;" data-ui-theme="light">
        <img src="../assets/img/avatar-12.svg" alt="Felix Silva" class="rounded-circle mb-3" width="64" height="64">
        <p class="fs-5 fst-italic text-body">&ldquo;This clear experience lets you focused on what matters wherever you are.&rdquo;</p>
        <div class="fw-semibold text-body">
          Felix Silva
        </div>
        <div class="small text-body-secondary">
          Data Analyst
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="text-center px-5 mx-auto" style="max-width: 560px;" data-ui-theme="light">
        <img src="../assets/img/avatar-9.svg" alt="Samir Brennan" class="rounded-circle mb-3" width="64" height="64">
        <p class="fs-5 fst-italic text-body">&ldquo;A friendly process keeps new ideas to life all year round.&rdquo;</p>
        <div class="fw-semibold text-body">
          Samir Brennan
        </div>
        <div class="small text-body-secondary">
          Project Manager
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="text-center px-5 mx-auto" style="max-width: 560px;" data-ui-theme="light">
        <img src="../assets/img/avatar-2.svg" alt="Sofia Whitaker" class="rounded-circle mb-3" width="64" height="64">
        <p class="fs-5 fst-italic text-body">&ldquo;The new hand-checked quality keeps the whole team on the same page for teams of every size.&rdquo;</p>
        <div class="fw-semibold text-body">
          Sofia Whitaker
        </div>
        <div class="small text-body-secondary">
          Frontend Engineer
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#quotes-891" data-ui-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-ui-target="#quotes-891" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

12Product slider

Several product cards per slide; on phones one card per slide is shown.

Linen shirt

$149.00

Ceramic mug

$279.50

Running cap

$136.00

Wool scarf

$409.00

Glass bottle

$377.00

Leather wallet

$343.50

<div id="products-892" class="carousel slide ca-car-products" data-ui-theme="dark">
  <div class="carousel-inner px-5">
    <div class="carousel-item active">
      <div class="row row-cols-1 row-cols-sm-3 g-3" data-ui-theme="light">
        <div class="col">
          <div class="card h-100">
            <img src="../assets/img/product-1.svg" class="card-img-top" alt="Linen shirt">
            <div class="card-body">
              <h6 class="card-title mb-1">Linen shirt</h6>
              <span class="fw-semibold">$149.00</span>
            </div>
          </div>
        </div>
        <div class="col d-none d-sm-block">
          <div class="card h-100">
            <img src="../assets/img/product-2.svg" class="card-img-top" alt="Ceramic mug">
            <div class="card-body">
              <h6 class="card-title mb-1">Ceramic mug</h6>
              <span class="fw-semibold">$279.50</span>
            </div>
          </div>
        </div>
        <div class="col d-none d-sm-block">
          <div class="card h-100">
            <img src="../assets/img/product-3.svg" class="card-img-top" alt="Running cap">
            <div class="card-body">
              <h6 class="card-title mb-1">Running cap</h6>
              <span class="fw-semibold">$136.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="row row-cols-1 row-cols-sm-3 g-3" data-ui-theme="light">
        <div class="col">
          <div class="card h-100">
            <img src="../assets/img/product-4.svg" class="card-img-top" alt="Wool scarf">
            <div class="card-body">
              <h6 class="card-title mb-1">Wool scarf</h6>
              <span class="fw-semibold">$409.00</span>
            </div>
          </div>
        </div>
        <div class="col d-none d-sm-block">
          <div class="card h-100">
            <img src="../assets/img/product-5.svg" class="card-img-top" alt="Glass bottle">
            <div class="card-body">
              <h6 class="card-title mb-1">Glass bottle</h6>
              <span class="fw-semibold">$377.00</span>
            </div>
          </div>
        </div>
        <div class="col d-none d-sm-block">
          <div class="card h-100">
            <img src="../assets/img/product-6.svg" class="card-img-top" alt="Leather wallet">
            <div class="card-body">
              <h6 class="card-title mb-1">Leather wallet</h6>
              <span class="fw-semibold">$343.50</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#products-892" data-ui-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-ui-target="#products-892" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

13Thumbnail navigation

Image thumbnails below the slides act as indicators, like a product gallery.

<div id="thumbs-893" class="carousel slide">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/photo-3.svg" class="d-block w-100" alt="Gallery photo 1">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-4.svg" class="d-block w-100" alt="Gallery photo 2">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-5.svg" class="d-block w-100" alt="Gallery photo 3">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-6.svg" class="d-block w-100" alt="Gallery photo 4">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#thumbs-893" data-ui-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-ui-target="#thumbs-893" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
  <div class="carousel-indicators ca-thumbs position-static m-0 mt-2 justify-content-start gap-2">
    <button type="button" data-ui-target="#thumbs-893" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Photo 1"><img src="../assets/img/photo-3.svg" alt="" class="rounded"></button>
    <button type="button" data-ui-target="#thumbs-893" data-ui-slide-to="1" aria-label="Photo 2"><img src="../assets/img/photo-4.svg" alt="" class="rounded"></button>
    <button type="button" data-ui-target="#thumbs-893" data-ui-slide-to="2" aria-label="Photo 3"><img src="../assets/img/photo-5.svg" alt="" class="rounded"></button>
    <button type="button" data-ui-target="#thumbs-893" data-ui-slide-to="3" aria-label="Photo 4"><img src="../assets/img/photo-6.svg" alt="" class="rounded"></button>
  </div>
</div>

14Inside a card

A carousel as the media area of a card, with rounded top corners.

Lisbon loft

4.5

$257.34 per night

<div class="card overflow-hidden" style="max-width: 24rem;">
  <div id="carousel-894" class="carousel slide">
    <div class="carousel-indicators">
      <button type="button" data-ui-target="#carousel-894" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-ui-target="#carousel-894" data-ui-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-ui-target="#carousel-894" data-ui-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="../assets/img/photo-10.svg" class="d-block w-100" alt="Room photo 1">
      </div>
      <div class="carousel-item">
        <img src="../assets/img/photo-11.svg" class="d-block w-100" alt="Room photo 2">
      </div>
      <div class="carousel-item">
        <img src="../assets/img/photo-12.svg" class="d-block w-100" alt="Room photo 3">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-ui-target="#carousel-894" data-ui-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-ui-target="#carousel-894" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
  </div>
  <div class="card-body">
    <div class="d-flex justify-content-between">
      <h5 class="card-title mb-1">Lisbon loft</h5>
      <span class="small"><i class="bi bi-star-fill" aria-hidden="true"></i> 4.5</span>
    </div>
    <p class="card-text text-body-secondary small mb-0">$257.34 per night</p>
  </div>
</div>

15Caption below the image

Text under each image and custom buttons outside the slides, e.g. an onboarding walkthrough.

Step 1: Friendly project

Our free shipping shows you focused on what matters all year round.

Step 2: Practical project

A focused project brings data easy to understand without extra tools.

Step 3: Clear launch

The new sustainable materials keeps your work organised without extra tools.

<div id="carousel-895" class="carousel slide" style="max-width: 560px;">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../assets/img/photo-1.svg" class="d-block w-100 rounded" alt="Step 1">
      <div class="pt-3">
        <h6 class="mb-1">Step 1: Friendly project</h6>
        <p class="small text-body-secondary mb-0">Our free shipping shows you focused on what matters all year round.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-3.svg" class="d-block w-100 rounded" alt="Step 2">
      <div class="pt-3">
        <h6 class="mb-1">Step 2: Practical project</h6>
        <p class="small text-body-secondary mb-0">A focused project brings data easy to understand without extra tools.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-5.svg" class="d-block w-100 rounded" alt="Step 3">
      <div class="pt-3">
        <h6 class="mb-1">Step 3: Clear launch</h6>
        <p class="small text-body-secondary mb-0">The new sustainable materials keeps your work organised without extra tools.</p>
      </div>
    </div>
  </div>
  <div class="d-flex justify-content-end gap-2 mt-2">
    <button class="btn btn-outline-secondary btn-sm" type="button" data-ui-target="#carousel-895" data-ui-slide="prev"><i class="bi bi-chevron-left" aria-hidden="true"></i> Back</button>
    <button class="btn btn-primary btn-sm" type="button" data-ui-target="#carousel-895" data-ui-slide="next">Next <i class="bi bi-chevron-right" aria-hidden="true"></i></button>
  </div>
</div>

16Announcement bar

A slim text-only carousel that rotates short announcements.

Free shipping on orders over $49.29

New members get 22% off the first order

29-day free returns

<div id="ticker-896" class="carousel slide carousel-fade text-bg-dark rounded py-2" data-ui-ride="carousel" data-ui-interval="4000">
  <div class="carousel-inner text-center small">
    <div class="carousel-item active">
      <i class="bi bi-truck" aria-hidden="true"></i> Free shipping on orders over $49.29
    </div>
    <div class="carousel-item">
      <i class="bi bi-gift-fill" aria-hidden="true"></i> New members get 22% off the first order
    </div>
    <div class="carousel-item">
      <i class="bi bi-arrow-return-left" aria-hidden="true"></i> 29-day free returns
    </div>
  </div>
</div>

17Keep playing on hover

data-ui-pause="false" keeps the autoplay running when the pointer is over the slides.

<div id="carousel-897" class="carousel slide" data-ui-ride="carousel" data-ui-pause="false">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/wide-8.svg" class="d-block w-100" alt="Showreel one">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-9.svg" class="d-block w-100" alt="Showreel two">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-10.svg" class="d-block w-100" alt="Showreel three">
    </div>
  </div>
</div>

18Fixed aspect ratio

A ratio wrapper with object-fit keeps every slide the same 21:9 shape whatever the image size.

<div id="carousel-898" class="carousel slide">
  <div class="carousel-indicators">
    <button type="button" data-ui-target="#carousel-898" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-ui-target="#carousel-898" data-ui-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-ui-target="#carousel-898" data-ui-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner rounded-4">
    <div class="carousel-item active">
      <div class="ratio ratio-21x9">
        <img src="../assets/img/photo-4.svg" class="object-fit-cover" alt="Cinematic slide 1">
      </div>
    </div>
    <div class="carousel-item">
      <div class="ratio ratio-21x9">
        <img src="../assets/img/photo-7.svg" class="object-fit-cover" alt="Cinematic slide 2">
      </div>
    </div>
    <div class="carousel-item">
      <div class="ratio ratio-21x9">
        <img src="../assets/img/photo-10.svg" class="object-fit-cover" alt="Cinematic slide 3">
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#carousel-898" data-ui-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-ui-target="#carousel-898" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

19Gallery with counter, no wrap

A position badge on each slide; data-ui-wrap="false" stops at the first and last photo.

1 / 4

2 / 4

3 / 4

4 / 4

<div id="gallery-899" class="carousel slide" data-ui-wrap="false">
  <div class="carousel-inner rounded">
    <div class="carousel-item active">
      <img src="../assets/img/photo-2.svg" class="d-block w-100" alt="Photo 1"><span class="badge text-bg-dark position-absolute top-0 end-0 m-3">1 / 4</span>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-4.svg" class="d-block w-100" alt="Photo 2"><span class="badge text-bg-dark position-absolute top-0 end-0 m-3">2 / 4</span>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-6.svg" class="d-block w-100" alt="Photo 3"><span class="badge text-bg-dark position-absolute top-0 end-0 m-3">3 / 4</span>
    </div>
    <div class="carousel-item">
      <img src="../assets/img/photo-8.svg" class="d-block w-100" alt="Photo 4"><span class="badge text-bg-dark position-absolute top-0 end-0 m-3">4 / 4</span>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-ui-target="#gallery-899" data-ui-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-ui-target="#gallery-899" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>

20Pill indicators

Custom-styled indicators: the active one stretches into a pill in the theme colour.

<div id="carousel-900" class="carousel slide ca-car-pills" data-ui-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-ui-target="#carousel-900" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-ui-target="#carousel-900" data-ui-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-ui-target="#carousel-900" data-ui-slide-to="2" aria-label="Slide 3"></button>
    <button type="button" data-ui-target="#carousel-900" data-ui-slide-to="3" aria-label="Slide 4"></button>
  </div>
  <div class="carousel-inner rounded-3">
    <div class="carousel-item active">
      <img src="../assets/img/wide-11.svg" class="d-block w-100" alt="Feature one">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-12.svg" class="d-block w-100" alt="Feature two">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-1.svg" class="d-block w-100" alt="Feature three">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-6.svg" class="d-block w-100" alt="Feature four">
    </div>
  </div>
</div>