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="../assets/img/photo-2.svg" class="block w-full" alt="Second slide">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-3.svg" 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="../assets/img/photo-4.svg" class="block w-full" alt="Slide one">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-5.svg" class="block w-full" alt="Slide two">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-6.svg" 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="../assets/img/photo-7.svg" class="block w-full" alt="Slide one">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-8.svg" class="block w-full" alt="Slide two">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-9.svg" 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="../assets/img/photo-10.svg" class="block w-full" alt="Speaker management">
<div class="carousel-caption hidden md:block">
<h5>Speaker management</h5>
<p>This secure team lets decisions quicker and clearer without extra tools.</p>
</div>
</div>
<div class="carousel-item">
<img src="../assets/img/photo-11.svg" class="block w-full" alt="Ticketing">
<div class="carousel-caption hidden md:block">
<h5>Speaker management</h5>
<p>The new hands-on workshops keeps data easy to understand at a fair price.</p>
</div>
</div>
<div class="carousel-item">
<img src="../assets/img/photo-12.svg" class="block w-full" alt="Sponsorship">
<div class="carousel-caption hidden md:block">
<h5>Venue booking</h5>
<p>A smart idea turns your work organised wherever you are.</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="../assets/img/photo-2.svg" class="block w-full" alt="Fade one">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-4.svg" class="block w-full" alt="Fade two">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-6.svg" 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="../assets/img/wide-1.svg" 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="../assets/img/wide-3.svg" class="block w-full" alt="Autoplay three">
</div>
<div class="carousel-item">
<img src="../assets/img/wide-4.svg" 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="../assets/img/photo-3.svg" 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="../assets/img/photo-5.svg" 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="../assets/img/photo-7.svg" 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="../assets/img/square-1.svg" class="block w-full" alt="Light slide one">
<div class="carousel-caption hidden md:block">
<h5>Focused goal</h5>
<p>Our networking app brings customers coming back wherever you are.</p>
</div>
</div>
<div class="carousel-item">
<img src="../assets/img/square-2.svg" class="block w-full" alt="Light slide two">
<div class="carousel-caption hidden md:block">
<h5>Flexible release</h5>
<p>This practical plan turns you focused on what matters with friendly support.</p>
</div>
</div>
<div class="carousel-item">
<img src="../assets/img/square-3.svg" class="block w-full" alt="Light slide three">
<div class="carousel-caption hidden md:block">
<h5>Simple release</h5>
<p>This flexible workflow brings results you can measure all year round.</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.
Experiences people talk about
A flexible plan connects every detail in view at a fair price.
Get started
Where great ideas meet
Our venue booking connects decisions quicker and clearer at a fair price.
See features
Where great ideas meet
This calm update brings customers coming back without the usual hassle.
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="../assets/img/wide-5.svg" class="block w-full" alt="Banner 1">
<div class="carousel-caption text-start">
<h3 class="font-bold">Experiences people talk about</h3>
<p class="hidden sm:block">A flexible plan connects every detail in view at a fair price.</p>
<a href="#" class="btn btn-primary">Get started</a>
</div>
</div>
<div class="carousel-item">
<img src="../assets/img/wide-6.svg" class="block w-full" alt="Banner 2">
<div class="carousel-caption text-start">
<h3 class="font-bold">Where great ideas meet</h3>
<p class="hidden sm:block">Our venue booking connects decisions quicker and clearer at a fair price.</p>
<a href="#" class="btn btn-primary">See features</a>
</div>
</div>
<div class="carousel-item">
<img src="../assets/img/wide-7.svg" class="block w-full" alt="Banner 3">
<div class="carousel-caption text-start">
<h3 class="font-bold">Where great ideas meet</h3>
<p class="hidden sm:block">This calm update brings customers coming back without the usual hassle.</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="../assets/img/photo-8.svg" class="block w-full" alt="Map view">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-9.svg" 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.
“This focused workflow keeps new ideas to life from the very first day.”
Kai Kowalski
Finance Lead
“A honest update guides your work organised all year round.”
Mason Lindqvist
Marketing Lead
“The new networking lounges helps decisions quicker and clearer without the usual hassle.”
Kenji Fischer
Project Manager
<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="Kai Kowalski" class="rounded-full mb-4" width="64" height="64">
<p class="text-lg italic text-body">“This focused workflow keeps new ideas to life from the very first day.”</p>
<div class="font-semibold text-body">
Kai Kowalski
</div>
<div class="small text-muted">
Finance 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-12.svg" alt="Mason Lindqvist" class="rounded-full mb-4" width="64" height="64">
<p class="text-lg italic text-body">“A honest update guides your work organised all year round.”</p>
<div class="font-semibold text-body">
Mason Lindqvist
</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-9.svg" alt="Kenji Fischer" class="rounded-full mb-4" width="64" height="64">
<p class="text-lg italic text-body">“The new networking lounges helps decisions quicker and clearer without the usual hassle.”</p>
<div class="font-semibold text-body">
Kenji Fischer
</div>
<div class="small text-muted">
Project Manager
</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.
Workshop ticket
$53.50
Virtual pass
$368.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-1.svg" class="card-img-top" alt="Workshop ticket">
<div class="card-body">
<h6 class="card-title mb-1">Workshop ticket</h6>
<span class="font-semibold">$53.50</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="VIP pass">
<div class="card-body">
<h6 class="card-title mb-1">VIP pass</h6>
<span class="font-semibold">$439.50</span>
</div>
</div>
</div>
<div class="col hidden sm:block">
<div class="card h-full">
<img src="../assets/img/product-3.svg" class="card-img-top" alt="Full access pass">
<div class="card-body">
<h6 class="card-title mb-1">Full access pass</h6>
<span class="font-semibold">$272.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-4.svg" class="card-img-top" alt="Virtual pass">
<div class="card-body">
<h6 class="card-title mb-1">Virtual pass</h6>
<span class="font-semibold">$368.99</span>
</div>
</div>
</div>
<div class="col hidden sm:block">
<div class="card h-full">
<img src="../assets/img/product-5.svg" class="card-img-top" alt="Early bird pass">
<div class="card-body">
<h6 class="card-title mb-1">Early bird pass</h6>
<span class="font-semibold">$217.00</span>
</div>
</div>
</div>
<div class="col hidden sm:block">
<div class="card h-full">
<img src="../assets/img/product-6.svg" class="card-img-top" alt="Group bundle">
<div class="card-body">
<h6 class="card-title mb-1">Group bundle</h6>
<span class="font-semibold">$467.99</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="../assets/img/photo-3.svg" class="block w-full" alt="Gallery photo 1">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-4.svg" class="block w-full" alt="Gallery photo 2">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-5.svg" class="block w-full" alt="Gallery photo 3">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-6.svg" 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="../assets/img/photo-3.svg" alt="" class="rounded-md"></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-md"></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-md"></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-md"></button>
</div>
</div>14Inside a card
A carousel as the media area of a card, with rounded top corners.
Austin loft
4.8$284.30 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="block w-full" alt="Room photo 1">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-11.svg" class="block w-full" alt="Room photo 2">
</div>
<div class="carousel-item">
<img src="../assets/img/photo-12.svg" 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">Austin loft</h5>
<span class="small"><i class="bi bi-star-fill" aria-hidden="true"></i> 4.8</span>
</div>
<p class="card-text text-muted small mb-0">$284.30 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: Smart journey
A practical experience guides data easy to understand without the usual hassle.
Step 2: Clear story
This calm team guides data easy to understand without the usual hassle.
Step 3: Flexible launch
This focused story shows 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="block w-full rounded-md" alt="Step 1">
<div class="pt-4">
<h6 class="mb-1">Step 1: Smart journey</h6>
<p class="small text-muted mb-0">A practical experience guides data easy to understand without the usual hassle.</p>
</div>
</div>
<div class="carousel-item">
<img src="../assets/img/photo-3.svg" class="block w-full rounded-md" alt="Step 2">
<div class="pt-4">
<h6 class="mb-1">Step 2: Clear story</h6>
<p class="small text-muted mb-0">This calm team guides data easy to understand without the usual hassle.</p>
</div>
</div>
<div class="carousel-item">
<img src="../assets/img/photo-5.svg" class="block w-full rounded-md" alt="Step 3">
<div class="pt-4">
<h6 class="mb-1">Step 3: Flexible launch</h6>
<p class="small text-muted mb-0">This focused story shows your work organised without extra tools.</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 $41.05
</div>
<div class="carousel-item">
<i class="bi bi-gift-fill" aria-hidden="true"></i> New members get 13% off the first order
</div>
<div class="carousel-item">
<i class="bi bi-arrow-return-left" aria-hidden="true"></i> 23-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="../assets/img/wide-8.svg" class="block w-full" alt="Showreel one">
</div>
<div class="carousel-item">
<img src="../assets/img/wide-9.svg" class="block w-full" alt="Showreel two">
</div>
<div class="carousel-item">
<img src="../assets/img/wide-10.svg" 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="../assets/img/photo-4.svg" class="object-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-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-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="../assets/img/photo-2.svg" 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="../assets/img/photo-4.svg" 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="../assets/img/photo-6.svg" 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="../assets/img/photo-8.svg" 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="../assets/img/wide-11.svg" class="block w-full" alt="Feature one">
</div>
<div class="carousel-item">
<img src="../assets/img/wide-12.svg" class="block w-full" alt="Feature two">
</div>
<div class="carousel-item">
<img src="../assets/img/wide-1.svg" class="block w-full" alt="Feature three">
</div>
<div class="carousel-item">
<img src="../assets/img/wide-6.svg" class="block w-full" alt="Feature four">
</div>
</div>
</div>