The Bootstrap 4 carousel is a slideshow component used to cycle through images, text, or any other content. It is commonly used for image sliders, testimonials, and featured content sections.
What This Tutorial Covers:
- Basic Bootstrap 4 carousel structure
- Adding captions to slides
- Controlling the carousel with indicators and arrows
- Autoplay and interval control
- Controlling the carousel with JavaScript
- Responsive settings
- Customizing the carousel with CSS
1. Basic Bootstrap 4 Carousel
Bootstrap’s carousel requires a wrapper element with the .carousel class. Inside it, we need:
- A carousel inner container (.carousel-inner) that holds the slides.
- Each slide inside .carousel-item.
- A carousel control with navigation arrows (.carousel-control-prev and .carousel-control-next).
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Carousel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div id="carouselExample" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400/ff5733" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400/33ff57" class="d-block w-100" alt="Slide 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" 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="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Explanation:
- .carousel creates the main carousel container.
- .carousel-inner wraps the slides.
- .carousel-item represents each slide.
- .active is required for the first slide.
- .carousel-control-prev and .carousel-control-next add navigation arrows.
2. Adding Captions to Slides
Use .carousel-caption inside .carousel-item to add text over each slide.
Example:
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>First Slide</h5>
<p>This is a caption for the first slide.</p>
</div>
</div>
Explanation:
- .carousel-caption adds text inside the slide.
- d-none d-md-block hides the caption on small screens.
3. Controlling the Carousel with Indicators
Indicators allow users to navigate between slides using dots.
Example:
<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
Explanation:
- Each <li> corresponds to a slide.
- data-slide-to=”0″ links to the first slide.
- .active highlights the current slide.
4. Controlling Carousel Speed and Autoplay
By default, the carousel autoplays every 5 seconds. You can change this behavior.
Adjust Slide Interval:
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="3000">
- data-interval=”3000″ changes the slide interval to 3 seconds.
Stop Autoplay:
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="false">
- data-interval=”false” prevents automatic sliding.
5. Controlling Carousel with JavaScript
You can start, stop, or change the carousel dynamically using JavaScript.
Example:
<script>
$('#carouselExample').carousel({
interval: 2000 // Changes slide every 2 seconds
});
// Stop the carousel
$('#carouselExample').carousel('pause');
// Start the carousel
$('#carouselExample').carousel('cycle');
</script>
Explanation:
- .carousel(‘pause’) stops the slideshow.
- .carousel(‘cycle’) starts it again.
6. Responsive Settings
Bootstrap 4 carousels are responsive by default. However, you can improve responsiveness by:
- Using max-width: 100% to prevent stretching.
- Ensuring images have a consistent aspect ratio.
Example:
<style>
.carousel img {
max-height: 500px;
object-fit: cover;
}
</style>
7. Customizing Carousel with CSS
Change Control Arrow Color:
<style>
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: invert(100%);
}
</style>
- This inverts the color of navigation arrows.
Custom Caption Background:
<style>
.carousel-caption {
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
</style>
- Adds a semi-transparent background to captions.
8. Full-Width Carousel
You can make the carousel take up the entire width of the screen.
Example:
<div id="fullWidthCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x600" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x600/ff5733" class="d-block w-100" alt="Slide 2">
</div>
</div>
</div>
- w-100 ensures the images stretch across the full width of the viewport.
Conclusion
Bootstrap 4’s carousel is a component for creating image sliders and content carousels. You can modify its behavior using indicators, controls, JavaScript, and custom CSS.
