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="https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="First slide">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?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-1567401893414-76b7b1e5a7a5?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-1567958451986-2de427a4a0be?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-1718985342149-7178154e0aee?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-1630905119003-329447458f85?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-1521335629791-ce4aec67dd15?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-1573612664822-d7d347da7b80?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-1443884590026-2e4d21aee71c?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).
<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-1598305762558-328f599df683?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Secure checkout">
<div class="carousel-caption hidden md:block">
<h5>Secure checkout</h5>
<p>Each product is checked by hand before it goes into the box.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1601647998829-ee316a565aea?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Gift wrapping">
<div class="carousel-caption hidden md:block">
<h5>30-day returns</h5>
<p>Every detail is handled by people who care about getting it right.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1580418835996-7783da1c3c6c?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full" alt="Secure checkout">
<div class="carousel-caption hidden md:block">
<h5>Gift wrapping</h5>
<p>Order before 2 pm and most items leave our warehouse the same day.</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-1441984904996-e0b6ba687e04?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-1567958451986-2de427a4a0be?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-1630905119003-329447458f85?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-1567958451986-2de427a4a0be?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Autoplay one">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1718985342149-7178154e0aee?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Autoplay two">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1630905119003-329447458f85?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-1521335629791-ce4aec67dd15?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).
<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-1567401893414-76b7b1e5a7a5?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-1718985342149-7178154e0aee?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-1521335629791-ce4aec67dd15?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.
<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-1521335629791-ce4aec67dd15?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>Bright team</h5>
<p>Not sure about the size? Our fit guide and live chat help you choose.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1573612664822-d7d347da7b80?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>Powerful process</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-1443884590026-2e4d21aee71c?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>Secure experience</h5>
<p>Our packaging is plastic-free and every delivery is carbon-neutral.</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.
Thoughtful goods for a simpler home
Friendly people answer your questions quickly, by phone, chat or email.
Get started
Shop the collection everyone talks about
We listen first, then build a plan around what you actually need.
See features
Everyday essentials, beautifully made
Every piece is made in small batches from materials we test ourselves.
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-1573612664822-d7d347da7b80?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">Thoughtful goods for a simpler home</h3>
<p class="hidden sm:block">Friendly people answer your questions quickly, by phone, chat or email.</p>
<a href="#" class="btn btn-primary">Get started</a>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1443884590026-2e4d21aee71c?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">Shop the collection everyone talks about</h3>
<p class="hidden sm:block">We listen first, then build a plan around what you actually need.</p>
<a href="#" class="btn btn-primary">See features</a>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1598305762558-328f599df683?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">Everyday essentials, beautifully made</h3>
<p class="hidden sm:block">Every piece is made in small batches from materials we test ourselves.</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-1573612664822-d7d347da7b80?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-1443884590026-2e4d21aee71c?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.
“We work directly with makers, so prices stay fair for everyone.”
Sofia Larsen
Customer Success
“We keep things simple, so you can focus on what matters to you.”
Mateo Novak
Marketing Lead
“Gift wrapping and a handwritten note are free on every order.”
Aria Fischer
Sales Executive
<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-9.svg" alt="Sofia Larsen" class="rounded-full mb-4" width="64" height="64">
<p class="text-lg italic text-body">“We work directly with makers, so prices stay fair for everyone.”</p>
<div class="font-semibold text-body">
Sofia Larsen
</div>
<div class="small text-muted">
Customer Success
</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="Mateo Novak" class="rounded-full mb-4" width="64" height="64">
<p class="text-lg italic text-body">“We keep things simple, so you can focus on what matters to you.”</p>
<div class="font-semibold text-body">
Mateo Novak
</div>
<div class="small text-muted">
Marketing Lead
</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-11.svg" alt="Aria Fischer" class="rounded-full mb-4" width="64" height="64">
<p class="text-lg italic text-body">“Gift wrapping and a handwritten note are free on every order.”</p>
<div class="font-semibold text-body">
Aria Fischer
</div>
<div class="small text-muted">
Sales Executive
</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.
Running cap
$26.00
Ceramic mug
$23.99
<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-7.svg" class="card-img-top" alt="Running cap">
<div class="card-body">
<h6 class="card-title mb-1">Running cap</h6>
<span class="font-semibold">$26.00</span>
</div>
</div>
</div>
<div class="col hidden sm:block">
<div class="card h-full">
<img src="../assets/img/product-4.svg" class="card-img-top" alt="Leather wallet">
<div class="card-body">
<h6 class="card-title mb-1">Leather wallet</h6>
<span class="font-semibold">$58.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="Rain jacket">
<div class="card-body">
<h6 class="card-title mb-1">Rain jacket</h6>
<span class="font-semibold">$124.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-3.svg" class="card-img-top" alt="Ceramic mug">
<div class="card-body">
<h6 class="card-title mb-1">Ceramic mug</h6>
<span class="font-semibold">$23.99</span>
</div>
</div>
</div>
<div class="col hidden sm:block">
<div class="card h-full">
<img src="../assets/img/product-2.svg" class="card-img-top" alt="Canvas tote">
<div class="card-body">
<h6 class="card-title mb-1">Canvas tote</h6>
<span class="font-semibold">$31.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="Cotton throw">
<div class="card-body">
<h6 class="card-title mb-1">Cotton throw</h6>
<span class="font-semibold">$83.00</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-1567401893414-76b7b1e5a7a5?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-1567958451986-2de427a4a0be?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-1718985342149-7178154e0aee?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-1630905119003-329447458f85?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-1567401893414-76b7b1e5a7a5?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-1567958451986-2de427a4a0be?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-1718985342149-7178154e0aee?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-1630905119003-329447458f85?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.
Cape Town loft
4.7$299.41 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-1598305762558-328f599df683?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-1601647998829-ee316a565aea?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-1580418835996-7783da1c3c6c?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">Cape Town loft</h5>
<span class="small"><i class="bi bi-star-fill" aria-hidden="true"></i> 4.7</span>
</div>
<p class="card-text text-muted small mb-0">$299.41 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: Elegant journey
Friendly people answer your questions quickly, by phone, chat or email.
Step 2: Friendly goal
Clear prices, honest advice and no surprises along the way.
Step 3: Smart team
Thousands of five-star reviews from customers who came back for more.
<div id="carousel-895" class="carousel slide" style="max-width: 560px;">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&w=1200&h=800&q=70" class="block w-full rounded-md" alt="Step 1">
<div class="pt-4">
<h6 class="mb-1">Step 1: Elegant journey</h6>
<p class="small text-muted mb-0">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-1567401893414-76b7b1e5a7a5?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: Friendly goal</h6>
<p class="small text-muted mb-0">Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1718985342149-7178154e0aee?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: Smart team</h6>
<p class="small text-muted mb-0">Thousands of five-star reviews from customers who came back for more.</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.
<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 $73.85
</div>
<div class="carousel-item">
<i class="bi bi-gift-fill" aria-hidden="true"></i> New members get 24% off the first order
</div>
<div class="carousel-item">
<i class="bi bi-arrow-return-left" aria-hidden="true"></i> 60-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-1601647998829-ee316a565aea?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-1580418835996-7783da1c3c6c?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-1441986300917-64674bd600d8?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-1567958451986-2de427a4a0be?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-1521335629791-ce4aec67dd15?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-1598305762558-328f599df683?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 / 42 / 43 / 44 / 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-1441984904996-e0b6ba687e04?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-1567958451986-2de427a4a0be?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-1630905119003-329447458f85?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-1573612664822-d7d347da7b80?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-1441984904996-e0b6ba687e04?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-1567401893414-76b7b1e5a7a5?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-1567958451986-2de427a4a0be?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-1443884590026-2e4d21aee71c?auto=format&fit=crop&w=1600&h=700&q=70" class="block w-full" alt="Feature four">
</div>
</div>
</div>