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-md">
    <div class="carousel-item active">
      <img src="../assets/img/photo-1.svg" class="block w-full" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1758691737124-05c5bffe46f0?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1702301266409-ed1bfe210971?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" 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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Slide one">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264350953-79ef8acbd562?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Slide two">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1742440710136-1976b1cad864?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" 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="sr-only">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="sr-only">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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1690264351371-b75a9a9bdbdd?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Slide one">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Slide two">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" 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="sr-only">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="sr-only">Next</span> </button>
</div>

4With captions

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

Workflow automation

Start in minutes and get help from a real person whenever you need it.

Smart reporting

We listen first, then build a plan around what you actually need.

Secure file sharing

Teams report saving around five hours a week after the first month.

<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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Secure file sharing">
      <div class="carousel-caption hidden md:block">
        <h5>Workflow automation</h5>
        <p>Start in minutes and get help from a real person whenever you need it.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264459911-6d68c747d8a7?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="API integrations">
      <div class="carousel-caption hidden md:block">
        <h5>Smart reporting</h5>
        <p>We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1742440711276-679934f5b988?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Secure file sharing">
      <div class="carousel-caption hidden md:block">
        <h5>Secure file sharing</h5>
        <p>Teams report saving around five hours a week after the first month.</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="sr-only">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="sr-only">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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1758691737124-05c5bffe46f0?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Fade one">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Fade two">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1742440710136-1976b1cad864?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" 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="sr-only">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="sr-only">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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Autoplay one">
    </div>
    <div class="carousel-item">
      <img src="../assets/img/wide-2.svg" class="block w-full" alt="Autoplay two">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1742440710136-1976b1cad864?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Autoplay three">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264351371-b75a9a9bdbdd?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" 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="sr-only">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="sr-only">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-md">
    <div class="carousel-item active" data-ui-interval="8000">
      <img src="https://images.unsplash.com/photo-1702301266409-ed1bfe210971?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Shown for 8 seconds">
      <div class="carousel-caption hidden md:block">
        <p class="mb-0">8 seconds</p>
      </div>
    </div>
    <div class="carousel-item" data-ui-interval="3000">
      <img src="https://images.unsplash.com/photo-1690264350953-79ef8acbd562?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Shown for 3 seconds">
      <div class="carousel-caption hidden md:block">
        <p class="mb-0">3 seconds</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264351371-b75a9a9bdbdd?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Default interval">
      <div class="carousel-caption hidden 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="sr-only">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="sr-only">Next</span> </button>
</div>

8Dark variant

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

Calm launch

Friendly people answer your questions quickly, by phone, chat or email.

Smart launch

Our team has done this many times, so you never have to guess.

Simple launch

Start free, upgrade when you grow and cancel any time with one click.

<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-md border">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1690264351371-b75a9a9bdbdd?auto=format&fit=crop&w=800&h=800&q=70" class="block w-full" alt="Light slide one">
      <div class="carousel-caption hidden md:block">
        <h5>Calm launch</h5>
        <p>Friendly people answer your questions quickly, by phone, chat or email.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?auto=format&fit=crop&w=800&h=800&q=70" class="block w-full" alt="Light slide two">
      <div class="carousel-caption hidden md:block">
        <h5>Smart launch</h5>
        <p>Our team has done this many times, so you never have to guess.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?auto=format&fit=crop&w=800&h=800&q=70" class="block w-full" alt="Light slide three">
      <div class="carousel-caption hidden md:block">
        <h5>Simple launch</h5>
        <p>Start free, upgrade when you grow and cancel any time with one click.</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="sr-only">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="sr-only">Next</span> </button>
</div>

9Hero banner

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

Turn scattered tasks into a clear plan

We measure success by how many customers come back and tell their friends.

Get started

One platform for every workflow

We keep things simple, so you can focus on what matters to you.

See features

Work that moves itself forward

Set up in an afternoon, connect the tools you use and invite your team.

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-lg">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Banner 1">
      <div class="carousel-caption text-start">
        <h3 class="font-bold">Turn scattered tasks into a clear plan</h3>
        <p class="hidden sm:block">We measure success by how many customers come back and tell their friends.</p>
        <a href="#" class="btn btn-primary">Get started</a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Banner 2">
      <div class="carousel-caption text-start">
        <h3 class="font-bold">One platform for every workflow</h3>
        <p class="hidden sm:block">We keep things simple, so you can focus on what matters to you.</p>
        <a href="#" class="btn btn-primary">See features</a>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Banner 3">
      <div class="carousel-caption text-start">
        <h3 class="font-bold">Work that moves itself forward</h3>
        <p class="hidden sm:block">Set up in an afternoon, connect the tools you use and invite your team.</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="sr-only">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="sr-only">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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Map view">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" 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="sr-only">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="sr-only">Next</span> </button>
</div>

11Testimonial slider

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

“Thousands of customers already trust us, and we work hard to keep it that way.”

Sofia Carter

Project Manager

“Clear reports turn weekly numbers into decisions in minutes, not days.”

Felix Alvarez

Project Manager

“Our open API and ready-made integrations fit into the stack you already have.”

Elena Novak

QA Engineer

<div id="quotes-891" class="carousel slide bg-light rounded-lg py-6" data-ui-theme="dark" data-ui-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="text-center px-12 mx-auto" style="max-width: 560px;" data-ui-theme="light">
        <img src="../assets/img/avatar-5.svg" alt="Sofia Carter" class="rounded-full mb-4" width="64" height="64">
        <p class="text-lg italic text-body">&ldquo;Thousands of customers already trust us, and we work hard to keep it that way.&rdquo;</p>
        <div class="font-semibold text-body">
          Sofia Carter
        </div>
        <div class="small text-muted">
          Project Manager
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="text-center px-12 mx-auto" style="max-width: 560px;" data-ui-theme="light">
        <img src="../assets/img/avatar-7.svg" alt="Felix Alvarez" class="rounded-full mb-4" width="64" height="64">
        <p class="text-lg italic text-body">&ldquo;Clear reports turn weekly numbers into decisions in minutes, not days.&rdquo;</p>
        <div class="font-semibold text-body">
          Felix Alvarez
        </div>
        <div class="small text-muted">
          Project Manager
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="text-center px-12 mx-auto" style="max-width: 560px;" data-ui-theme="light">
        <img src="../assets/img/avatar-12.svg" alt="Elena Novak" class="rounded-full mb-4" width="64" height="64">
        <p class="text-lg italic text-body">&ldquo;Our open API and ready-made integrations fit into the stack you already have.&rdquo;</p>
        <div class="font-semibold text-body">
          Elena Novak
        </div>
        <div class="small text-muted">
          QA 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="sr-only">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="sr-only">Next</span> </button>
</div>

12Product slider

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

Business plan

$51.00

Marketing toolkit

$25.99

Priority support

$31.00

Team plan

$20.00

Storage pack

$9.00

Starter plan

Free

<div id="products-892" class="carousel slide ca-car-products" data-ui-theme="dark">
  <div class="carousel-inner px-12">
    <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-full">
            <img src="../assets/img/product-3.svg" class="card-img-top" alt="Business plan">
            <div class="card-body">
              <h6 class="card-title mb-1">Business plan</h6>
              <span class="font-semibold">$51.00</span>
            </div>
          </div>
        </div>
        <div class="col hidden sm:block">
          <div class="card h-full">
            <img src="../assets/img/product-9.svg" class="card-img-top" alt="Marketing toolkit">
            <div class="card-body">
              <h6 class="card-title mb-1">Marketing toolkit</h6>
              <span class="font-semibold">$25.99</span>
            </div>
          </div>
        </div>
        <div class="col hidden sm:block">
          <div class="card h-full">
            <img src="../assets/img/product-7.svg" class="card-img-top" alt="Priority support">
            <div class="card-body">
              <h6 class="card-title mb-1">Priority support</h6>
              <span class="font-semibold">$31.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-full">
            <img src="../assets/img/product-2.svg" class="card-img-top" alt="Team plan">
            <div class="card-body">
              <h6 class="card-title mb-1">Team plan</h6>
              <span class="font-semibold">$20.00</span>
            </div>
          </div>
        </div>
        <div class="col hidden sm:block">
          <div class="card h-full">
            <img src="../assets/img/product-12.svg" class="card-img-top" alt="Storage pack">
            <div class="card-body">
              <h6 class="card-title mb-1">Storage pack</h6>
              <span class="font-semibold">$9.00</span>
            </div>
          </div>
        </div>
        <div class="col hidden sm:block">
          <div class="card h-full">
            <img src="../assets/img/product-1.svg" class="card-img-top" alt="Starter plan">
            <div class="card-body">
              <h6 class="card-title mb-1">Starter plan</h6>
              <span class="font-semibold">Free</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="sr-only">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="sr-only">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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1702301266409-ed1bfe210971?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Gallery photo 1">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Gallery photo 2">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264350953-79ef8acbd562?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Gallery photo 3">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1742440710136-1976b1cad864?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" 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="sr-only">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="sr-only">Next</span> </button>
  <div class="carousel-indicators ca-thumbs static m-0 mt-2 justify-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="https://images.unsplash.com/photo-1702301266409-ed1bfe210971?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="rounded-md"></button>
    <button type="button" data-ui-target="#thumbs-893" data-ui-slide-to="1" aria-label="Photo 2"><img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="rounded-md"></button>
    <button type="button" data-ui-target="#thumbs-893" data-ui-slide-to="2" aria-label="Photo 3"><img src="https://images.unsplash.com/photo-1690264350953-79ef8acbd562?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="rounded-md"></button>
    <button type="button" data-ui-target="#thumbs-893" data-ui-slide-to="3" aria-label="Photo 4"><img src="https://images.unsplash.com/photo-1742440710136-1976b1cad864?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="rounded-md"></button>
  </div>
</div>

14Inside a card

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

Barcelona loft

4.5

$171.89 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="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Room photo 1">
      </div>
      <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1690264459911-6d68c747d8a7?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Room photo 2">
      </div>
      <div class="carousel-item">
        <img src="https://images.unsplash.com/photo-1742440711276-679934f5b988?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" 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="sr-only">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="sr-only">Next</span> </button>
  </div>
  <div class="card-body">
    <div class="flex justify-between">
      <h5 class="card-title mb-1">Barcelona loft</h5>
      <span class="small"><i class="bi bi-star-fill" aria-hidden="true"></i> 4.5</span>
    </div>
    <p class="card-text text-muted small mb-0">$171.89 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: Secure workflow

We listen first, then build a plan around what you actually need.

Step 2: Clear workflow

Real-time dashboards show what is on track and what needs attention.

Step 3: Calm workflow

We measure success by how many customers come back and tell their friends.

<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="block w-full rounded-md" alt="Step 1">
      <div class="pt-4">
        <h6 class="mb-1">Step 1: Secure workflow</h6>
        <p class="small text-muted mb-0">We listen first, then build a plan around what you actually need.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1702301266409-ed1bfe210971?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full rounded-md" alt="Step 2">
      <div class="pt-4">
        <h6 class="mb-1">Step 2: Clear workflow</h6>
        <p class="small text-muted mb-0">Real-time dashboards show what is on track and what needs attention.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264350953-79ef8acbd562?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full rounded-md" alt="Step 3">
      <div class="pt-4">
        <h6 class="mb-1">Step 3: Calm workflow</h6>
        <p class="small text-muted mb-0">We measure success by how many customers come back and tell their friends.</p>
      </div>
    </div>
  </div>
  <div class="flex justify-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 $65.71

New members get 19% off the first order

44-day free returns

<div id="ticker-896" class="carousel slide carousel-fade text-bg-dark rounded-md 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 $65.71
    </div>
    <div class="carousel-item">
      <i class="bi bi-gift-fill" aria-hidden="true"></i> New members get 19% off the first order
    </div>
    <div class="carousel-item">
      <i class="bi bi-arrow-return-left" aria-hidden="true"></i> 44-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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1690264459911-6d68c747d8a7?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Showreel one">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1742440711276-679934f5b988?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Showreel two">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690378820474-b468b8ee64d3?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" 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-xl">
    <div class="carousel-item active">
      <div class="ratio ratio-21x9">
        <img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?auto=format&fit=crop&w=1200&h=800&q=70" class="object-cover" alt="Cinematic slide 1">
      </div>
    </div>
    <div class="carousel-item">
      <div class="ratio ratio-21x9">
        <img src="https://images.unsplash.com/photo-1690264351371-b75a9a9bdbdd?auto=format&fit=crop&w=1200&h=800&q=70" class="object-cover" alt="Cinematic slide 2">
      </div>
    </div>
    <div class="carousel-item">
      <div class="ratio ratio-21x9">
        <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&h=800&q=70" class="object-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="sr-only">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="sr-only">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-md">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1758691737124-05c5bffe46f0?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Photo 1"><span class="badge text-bg-dark absolute top-0 end-0 m-4">1 / 4</span>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Photo 2"><span class="badge text-bg-dark absolute top-0 end-0 m-4">2 / 4</span>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1742440710136-1976b1cad864?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Photo 3"><span class="badge text-bg-dark absolute top-0 end-0 m-4">3 / 4</span>
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1531545514256-b1400bc00f31?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Photo 4"><span class="badge text-bg-dark absolute top-0 end-0 m-4">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="sr-only">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="sr-only">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-lg">
    <div class="carousel-item active">
      <img src="https://images.unsplash.com/photo-1758691737124-05c5bffe46f0?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Feature one">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1702301266409-ed1bfe210971?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Feature two">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1554902843-260acd0993f8?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Feature three">
    </div>
    <div class="carousel-item">
      <img src="https://images.unsplash.com/photo-1690264421892-46e3af5c3455?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Feature four">
    </div>
  </div>
</div>