By the end of this lesson, you will be able to:
:information_source: What is a Bootstrap Carousel? A Bootstrap carousel is a slideshow component that cycles through elements-like images or text slides. Think of it as an automatic slideshow on a website!
Bootstrap carousels have 3 main parts:
Decomposition of carousel
:bulb: Tip You don't need to use all three components! You can pick and choose based on what your carousel needs. For example, you might want just the slides without any controls.
We'll explore how to build carousels step by step:
This is the simplest carousel - just images that automatically rotate.
:memo: Key Points:
- Images are wrapped in
.carousel-item
divs- All items go inside a
.carousel-inner
container- One item must have the
active
class to start
Example:
HTML Input:
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=3" alt="Third slide">
</div>
</div>
</div>
Output:
Now let's add navigation buttons! Users can click to go forward or backward through the slides.
:memo: What's New:
- We add previous and next buttons using
carousel-control-prev
andcarousel-control-next
- Each button links to the carousel using
href="#carouselID"
- The buttons contain icons and screen reader text
Example:
HTML Input:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=3" alt="Third slide">
</div>
</div>
<!-- Previous button -->
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<!-- Next button -->
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Output:
Indicators are the small dots that show which slide you're viewing. They also let users jump to any slide!
:memo: What's New:
- We add an ordered list (
<ol>
) with classcarousel-indicators
- Each
<li>
represents one slide- The
data-slide-to
attribute tells which slide to show- The active indicator gets the
active
class
Example:
HTML Input:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=3" alt="Third slide">
</div>
</div>
</div>
Output:
Captions add text overlays to your slides - perfect for titles and descriptions!
:memo: What's New:
- Each slide can have a
carousel-caption
div- You can add headings (
<h5>
) and paragraphs (<p>
) inside- The
d-none d-md-block
classes hide captions on small screens
Example:
HTML Input:
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=1" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>First Slide Label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=2" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Second Slide Label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=3" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Third Slide Label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
</div>
Output:
Want a smooth fade between slides instead of the sliding motion? Use the crossfade effect!
:information_source: How Crossfade Works:
- Default behavior: Slides move left/right
- With crossfade: Current slide fades out, next slide fades in
- Just add the
carousel-fade
class to your carousel
Example:
HTML Input:
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=1" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=2" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://picsum.photos/800/400?random=3" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Output: Try the code above to see the smooth fade transition effect between slides
Bootstrap doesn't support carousels inside carousels (nested carousels).
Nested carousel
:warning: Warning If you need multiple carousels, place them separately on your page, not inside each other!
Carousels don't automatically resize images to match. Different sized images can make your carousel look messy!
:bulb: Tip Solution: Use CSS to ensure all images have the same dimensions
Example:
CSS Solution for consistent image sizing:
.carousel-item img {
width: 100%;
height: 400px; /* Fixed height */
object-fit: cover; /* Maintains aspect ratio while filling space */
}
HTML with CSS class:
<div class="carousel-item active">
<img class="d-block w-100 carousel-img" src="portrait-image.jpg" alt="Portrait image">
</div>
Before fix:
This ensures all images display at the same size regardless of their original dimensions.
You've learned how to create Bootstrap carousels with:
Remember to watch out for the limitations and use CSS to ensure consistent image sizes!
Code with AI: Create interactive Bootstrap components.
Prompts:
Try these challenges to master Bootstrap carousels:
:bulb: Tip Start simple! Build a basic carousel first, then add features one at a time.