Carousel
Carousels cycle through images or other content. Add controls with data-ui-slide, indicators with data-ui-slide-to, captions, a fade transition or the dark variant, and start autoplay with data-ui-ride="carousel". Keep slides few and meaningful.
1Slides only
The simplest carousel: slides that cycle automatically, without controls.
<div id="carousel-881" class="carousel slide" data-ui-ride="carousel">
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1758270705290-62b6294dd044?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="First slide">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Second slide">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1565598621680-94ac0c22b148?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Third slide">
</div>
</div>
</div>2With controls
Previous and next buttons with data-ui-slide.
<div id="carousel-882" class="carousel slide">
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Slide one">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1758270705518-b61b40527e76?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Slide two">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Slide three">
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-882" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-882" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>3With indicators
Indicator buttons with data-ui-slide-to jump straight to a slide.
<div id="carousel-883" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-ui-target="#carousel-883" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-ui-target="#carousel-883" data-ui-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-ui-target="#carousel-883" data-ui-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1565598611425-45b0878bdd0b?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Slide one">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1596247290824-e9f12b8c574f?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Slide two">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Slide three">
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-883" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-883" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>4With captions
carousel-caption adds a heading and text over each slide (hidden on phones).
Online courses
Earn a certificate at the end of each course and share it with employers.
Certificates
Instructors are working professionals who teach what they use every day.
Online courses
Clear prices, honest advice and no surprises along the way.
<div id="carousel-884" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-ui-target="#carousel-884" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-ui-target="#carousel-884" data-ui-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-ui-target="#carousel-884" data-ui-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1620829813573-7c9e1877706f?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Mentoring">
<div class="carousel-caption d-none d-md-block">
<h5>Online courses</h5>
<p>Earn a certificate at the end of each course and share it with employers.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1752650736024-d6aac18abc2d?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Study groups">
<div class="carousel-caption d-none d-md-block">
<h5>Certificates</h5>
<p>Instructors are working professionals who teach what they use every day.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Online courses">
<div class="carousel-caption d-none d-md-block">
<h5>Online courses</h5>
<p>Clear prices, honest advice and no surprises along the way.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-884" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-884" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>5Crossfade
carousel-fade fades between slides instead of sliding.
<div id="carousel-885" class="carousel slide carousel-fade">
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Fade one">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Fade two">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Fade three">
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-885" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-885" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>6Autoplay
data-ui-ride="carousel" starts cycling on page load; hovering pauses it.
<div id="carousel-886" class="carousel slide" data-ui-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-ui-target="#carousel-886" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-ui-target="#carousel-886" data-ui-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-ui-target="#carousel-886" data-ui-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-ui-target="#carousel-886" data-ui-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Autoplay one">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1758270705518-b61b40527e76?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Autoplay two">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Autoplay three">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1565598611425-45b0878bdd0b?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Autoplay four">
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-886" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-886" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>7Per-slide interval
data-ui-interval on each item sets how long that slide stays (in ms).
8 seconds
3 seconds
Default 5 seconds
<div id="carousel-887" class="carousel slide" data-ui-ride="carousel">
<div class="carousel-inner rounded">
<div class="carousel-item active" data-ui-interval="8000">
<img src="https://images.unsplash.com/photo-1565598621680-94ac0c22b148?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Shown for 8 seconds">
<div class="carousel-caption d-none d-md-block">
<p class="mb-0">8 seconds</p>
</div>
</div>
<div class="carousel-item" data-ui-interval="3000">
<img src="https://images.unsplash.com/photo-1758270705518-b61b40527e76?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Shown for 3 seconds">
<div class="carousel-caption d-none d-md-block">
<p class="mb-0">3 seconds</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1565598611425-45b0878bdd0b?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Default interval">
<div class="carousel-caption d-none d-md-block">
<p class="mb-0">Default 5 seconds</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-887" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-887" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>8Dark variant
data-ui-theme="dark" gives dark controls, indicators and captions for light images.
Bright idea
Our team has done this many times, so you never have to guess.
Focused story
Study groups and a friendly forum keep you motivated along the way.
Focused release
Guided learning paths take you from beginner to job-ready step by step.
<div id="carousel-888" class="carousel slide" data-ui-theme="dark">
<div class="carousel-indicators">
<button type="button" data-ui-target="#carousel-888" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-ui-target="#carousel-888" data-ui-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-ui-target="#carousel-888" data-ui-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner rounded border">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1565598611425-45b0878bdd0b?auto=format&fit=crop&w=800&h=800&q=70" class="d-block w-100" alt="Light slide one">
<div class="carousel-caption d-none d-md-block">
<h5>Bright idea</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-1596247290824-e9f12b8c574f?auto=format&fit=crop&w=800&h=800&q=70" class="d-block w-100" alt="Light slide two">
<div class="carousel-caption d-none d-md-block">
<h5>Focused story</h5>
<p>Study groups and a friendly forum keep you motivated along the way.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?auto=format&fit=crop&w=800&h=800&q=70" class="d-block w-100" alt="Light slide three">
<div class="carousel-caption d-none d-md-block">
<h5>Focused release</h5>
<p>Guided learning paths take you from beginner to job-ready step by step.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-888" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-888" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>9Hero banner
Wide slides with left-aligned headline and call to action, shown on all screen sizes.
The online school for busy people
Short quizzes after each lesson help new knowledge stick.
Get started
Your next career starts here
Start in minutes and get help from a real person whenever you need it.
See features
Short courses, real results
Career coaches help with your CV, portfolio and interview practice.
View pricing<div id="hero-889" class="carousel slide carousel-fade ca-hero-car" data-ui-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-ui-target="#hero-889" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-ui-target="#hero-889" data-ui-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-ui-target="#hero-889" data-ui-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner rounded-3">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1596247290824-e9f12b8c574f?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Banner 1">
<div class="carousel-caption text-start">
<h3 class="fw-bold">The online school for busy people</h3>
<p class="d-none d-sm-block">Short quizzes after each lesson help new knowledge stick.</p>
<a href="#" class="btn btn-primary">Get started</a>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Banner 2">
<div class="carousel-caption text-start">
<h3 class="fw-bold">Your next career starts here</h3>
<p class="d-none d-sm-block">Start in minutes and get help from a real person whenever you need it.</p>
<a href="#" class="btn btn-primary">See features</a>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1620829813573-7c9e1877706f?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Banner 3">
<div class="carousel-caption text-start">
<h3 class="fw-bold">Short courses, real results</h3>
<p class="d-none d-sm-block">Career coaches help with your CV, portfolio and interview practice.</p>
<a href="#" class="btn btn-primary">View pricing</a>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#hero-889" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#hero-889" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>10No touch swiping
data-ui-touch="false" turns off swipe, useful when slides contain draggable content.
<div id="carousel-890" class="carousel slide" data-ui-touch="false">
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1596247290824-e9f12b8c574f?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Map view">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Satellite view">
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-890" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-890" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>11Testimonial slider
Text-only slides with customer quotes; dark controls sit on the light panel.
“Mentors review your projects and give feedback within two days.”
Luna Alvarez
Marketing Lead
“Thousands of students already trust us, and we work hard to keep it that way.”
Arjun Harlow
Project Manager
“Every course is built around hands-on projects you can add to your portfolio.”
Hana Whitaker
Backend Engineer
<div id="quotes-891" class="carousel slide bg-light rounded-3 py-4" data-ui-theme="dark" data-ui-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="text-center px-5 mx-auto" style="max-width: 560px;" data-ui-theme="light">
<img src="../assets/img/avatar-6.svg" alt="Luna Alvarez" class="rounded-circle mb-3" width="64" height="64">
<p class="fs-5 fst-italic text-body">“Mentors review your projects and give feedback within two days.”</p>
<div class="fw-semibold text-body">
Luna Alvarez
</div>
<div class="small text-body-secondary">
Marketing Lead
</div>
</div>
</div>
<div class="carousel-item">
<div class="text-center px-5 mx-auto" style="max-width: 560px;" data-ui-theme="light">
<img src="../assets/img/avatar-8.svg" alt="Arjun Harlow" class="rounded-circle mb-3" width="64" height="64">
<p class="fs-5 fst-italic text-body">“Thousands of students already trust us, and we work hard to keep it that way.”</p>
<div class="fw-semibold text-body">
Arjun Harlow
</div>
<div class="small text-body-secondary">
Project Manager
</div>
</div>
</div>
<div class="carousel-item">
<div class="text-center px-5 mx-auto" style="max-width: 560px;" data-ui-theme="light">
<img src="../assets/img/avatar-12.svg" alt="Hana Whitaker" class="rounded-circle mb-3" width="64" height="64">
<p class="fs-5 fst-italic text-body">“Every course is built around hands-on projects you can add to your portfolio.”</p>
<div class="fw-semibold text-body">
Hana Whitaker
</div>
<div class="small text-body-secondary">
Backend Engineer
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#quotes-891" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#quotes-891" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>12Product slider
Several product cards per slide; on phones one card per slide is shown.
Public speaking
$73.00
Brand design
$136.00
Project management
$183.99
Python basics
$107.99
Copywriting
$80.00
Digital marketing
$129.00<div id="products-892" class="carousel slide ca-car-products" data-ui-theme="dark">
<div class="carousel-inner px-5">
<div class="carousel-item active">
<div class="row row-cols-1 row-cols-sm-3 g-3" data-ui-theme="light">
<div class="col">
<div class="card h-100">
<img src="../assets/img/product-4.svg" class="card-img-top" alt="Public speaking">
<div class="card-body">
<h6 class="card-title mb-1">Public speaking</h6>
<span class="fw-semibold">$73.00</span>
</div>
</div>
</div>
<div class="col d-none d-sm-block">
<div class="card h-100">
<img src="../assets/img/product-8.svg" class="card-img-top" alt="Brand design">
<div class="card-body">
<h6 class="card-title mb-1">Brand design</h6>
<span class="fw-semibold">$136.00</span>
</div>
</div>
</div>
<div class="col d-none d-sm-block">
<div class="card h-100">
<img src="../assets/img/product-6.svg" class="card-img-top" alt="Project management">
<div class="card-body">
<h6 class="card-title mb-1">Project management</h6>
<span class="fw-semibold">$183.99</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row row-cols-1 row-cols-sm-3 g-3" data-ui-theme="light">
<div class="col">
<div class="card h-100">
<img src="../assets/img/product-9.svg" class="card-img-top" alt="Python basics">
<div class="card-body">
<h6 class="card-title mb-1">Python basics</h6>
<span class="fw-semibold">$107.99</span>
</div>
</div>
</div>
<div class="col d-none d-sm-block">
<div class="card h-100">
<img src="../assets/img/product-11.svg" class="card-img-top" alt="Copywriting">
<div class="card-body">
<h6 class="card-title mb-1">Copywriting</h6>
<span class="fw-semibold">$80.00</span>
</div>
</div>
</div>
<div class="col d-none d-sm-block">
<div class="card h-100">
<img src="../assets/img/product-7.svg" class="card-img-top" alt="Digital marketing">
<div class="card-body">
<h6 class="card-title mb-1">Digital marketing</h6>
<span class="fw-semibold">$129.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="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#products-892" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>13Thumbnail navigation
Image thumbnails below the slides act as indicators, like a product gallery.
<div id="thumbs-893" class="carousel slide">
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1565598621680-94ac0c22b148?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Gallery photo 1">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Gallery photo 2">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1758270705518-b61b40527e76?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Gallery photo 3">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Gallery photo 4">
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#thumbs-893" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#thumbs-893" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
<div class="carousel-indicators ca-thumbs position-static m-0 mt-2 justify-content-start gap-2">
<button type="button" data-ui-target="#thumbs-893" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Photo 1"><img src="https://images.unsplash.com/photo-1565598621680-94ac0c22b148?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="rounded"></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-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="rounded"></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-1758270705518-b61b40527e76?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="rounded"></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-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&h=800&q=70" alt="" class="rounded"></button>
</div>
</div>14Inside a card
A carousel as the media area of a card, with rounded top corners.
Denver loft
4.5$225.90 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-1620829813573-7c9e1877706f?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Room photo 1">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1752650736024-d6aac18abc2d?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Room photo 2">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Room photo 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-894" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-894" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>
<div class="card-body">
<div class="d-flex justify-content-between">
<h5 class="card-title mb-1">Denver loft</h5>
<span class="small"><i class="bi bi-star-fill" aria-hidden="true"></i> 4.5</span>
</div>
<p class="card-text text-body-secondary small mb-0">$225.90 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: Reliable launch
Guided learning paths take you from beginner to job-ready step by step.
Step 2: Focused process
Mentors review your projects and give feedback within two days.
Step 3: Flexible community
Short quizzes after each lesson help new knowledge stick.
<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-1758270705290-62b6294dd044?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100 rounded" alt="Step 1">
<div class="pt-3">
<h6 class="mb-1">Step 1: Reliable launch</h6>
<p class="small text-body-secondary mb-0">Guided learning paths take you from beginner to job-ready step by step.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1565598621680-94ac0c22b148?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100 rounded" alt="Step 2">
<div class="pt-3">
<h6 class="mb-1">Step 2: Focused process</h6>
<p class="small text-body-secondary mb-0">Mentors review your projects and give feedback within two days.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1758270705518-b61b40527e76?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100 rounded" alt="Step 3">
<div class="pt-3">
<h6 class="mb-1">Step 3: Flexible community</h6>
<p class="small text-body-secondary mb-0">Short quizzes after each lesson help new knowledge stick.</p>
</div>
</div>
</div>
<div class="d-flex justify-content-end gap-2 mt-2">
<button class="btn btn-outline-secondary btn-sm" type="button" data-ui-target="#carousel-895" data-ui-slide="prev"><i class="bi bi-chevron-left" aria-hidden="true"></i> Back</button>
<button class="btn btn-primary btn-sm" type="button" data-ui-target="#carousel-895" data-ui-slide="next">Next <i class="bi bi-chevron-right" aria-hidden="true"></i></button>
</div>
</div>16Announcement bar
A slim text-only carousel that rotates short announcements.
<div id="ticker-896" class="carousel slide carousel-fade text-bg-dark rounded py-2" data-ui-ride="carousel" data-ui-interval="4000">
<div class="carousel-inner text-center small">
<div class="carousel-item active">
<i class="bi bi-truck" aria-hidden="true"></i> Free shipping on orders over $64.92
</div>
<div class="carousel-item">
<i class="bi bi-gift" aria-hidden="true"></i> New members get 25% off the first order
</div>
<div class="carousel-item">
<i class="bi bi-arrow-return-left" aria-hidden="true"></i> 19-day free returns
</div>
</div>
</div>17Keep playing on hover
data-ui-pause="false" keeps the autoplay running when the pointer is over the slides.
<div id="carousel-897" class="carousel slide" data-ui-ride="carousel" data-ui-pause="false">
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1752650736024-d6aac18abc2d?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Showreel one">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1531538606174-0f90ff5dce83?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Showreel two">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1758270705290-62b6294dd044?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Showreel three">
</div>
</div>
</div>18Fixed aspect ratio
A ratio wrapper with object-fit keeps every slide the same 21:9 shape whatever the image size.
<div id="carousel-898" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-ui-target="#carousel-898" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-ui-target="#carousel-898" data-ui-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-ui-target="#carousel-898" data-ui-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner rounded-4">
<div class="carousel-item active">
<div class="ratio ratio-21x9">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&h=800&q=70" class="object-fit-cover" alt="Cinematic slide 1">
</div>
</div>
<div class="carousel-item">
<div class="ratio ratio-21x9">
<img src="https://images.unsplash.com/photo-1565598611425-45b0878bdd0b?auto=format&fit=crop&w=1200&h=800&q=70" class="object-fit-cover" alt="Cinematic slide 2">
</div>
</div>
<div class="carousel-item">
<div class="ratio ratio-21x9">
<img src="https://images.unsplash.com/photo-1620829813573-7c9e1877706f?auto=format&fit=crop&w=1200&h=800&q=70" class="object-fit-cover" alt="Cinematic slide 3">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#carousel-898" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#carousel-898" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>19Gallery with counter, no wrap
A position badge on each slide; data-ui-wrap="false" stops at the first and last photo.
1 / 42 / 43 / 44 / 4<div id="gallery-899" class="carousel slide" data-ui-wrap="false">
<div class="carousel-inner rounded">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Photo 1"><span class="badge text-bg-dark position-absolute top-0 end-0 m-3">1 / 4</span>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Photo 2"><span class="badge text-bg-dark position-absolute top-0 end-0 m-3">2 / 4</span>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1543269865-0a740d43b90c?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Photo 3"><span class="badge text-bg-dark position-absolute top-0 end-0 m-3">3 / 4</span>
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1596247290824-e9f12b8c574f?auto=format&fit=crop&w=1200&h=800&q=70" class="d-block w-100" alt="Photo 4"><span class="badge text-bg-dark position-absolute top-0 end-0 m-3">4 / 4</span>
</div>
</div>
<button class="carousel-control-prev" type="button" data-ui-target="#gallery-899" data-ui-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button>
<button class="carousel-control-next" type="button" data-ui-target="#gallery-899" data-ui-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
</div>20Pill indicators
Custom-styled indicators: the active one stretches into a pill in the theme colour.
<div id="carousel-900" class="carousel slide ca-car-pills" data-ui-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-ui-target="#carousel-900" data-ui-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-ui-target="#carousel-900" data-ui-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-ui-target="#carousel-900" data-ui-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-ui-target="#carousel-900" data-ui-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner rounded-3">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1516321497487-e288fb19713f?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Feature one">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1565598621680-94ac0c22b148?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Feature two">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Feature three">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1525130413817-d45c1d127c42?auto=format&fit=crop&w=1600&h=700&q=70" class="d-block w-100" alt="Feature four">
</div>
</div>
</div>