Bootstrap 5 Carousel Guide
A carousel (also called a slideshow) is a component that cycles through images, text, or other content. Bootstrap 5 provides a built-in responsive and touch-enabled carousel system that can be easily customized.
1. Basic Bootstrap 5 Carousel
The default Bootstrap carousel includes indicators, controls, and captions.
Example: Simple Image Carousel
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Carousel</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h2>Basic Bootstrap 5 Carousel</h2>
<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carouselExample" data-bs-slide-to="2"></button>
</div>
<!-- Slides -->
<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 class="carousel-caption d-none d-md-block">
<h5>First Slide</h5>
<p>Some description for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 2">
<div class="carousel-caption d-none d-md-block">
<h5>Second Slide</h5>
<p>Some description for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide 3">
<div class="carousel-caption d-none d-md-block">
<h5>Third Slide</h5>
<p>Some description for the third slide.</p>
</div>
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
</body>
</html>
How It Works:
.carousel- Main carousel container.carousel-inner- Wraps all slides.carousel-item- Individual slide.carousel-indicators- Navigation dots.carousel-control-prev / .carousel-control-next- Left & right navigation buttons
2. Carousel Without Controls
If you don’t want prev/next buttons, just remove them.
<div id="carouselNoControls" class="carousel slide">
<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" class="d-block w-100" alt="Slide 2">
</div>
</div>
</div>
3. Auto-Start Carousel (Automatic Sliding)
Use data-bs-ride="carousel" to start the carousel automatically.
<div id="carouselAuto" class="carousel slide" data-bs-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" class="d-block w-100" alt="Slide 2">
</div>
</div>
</div>
4. Changing Slide Speed
Use data-bs-interval="3000" to change slide duration (3000ms = 3 seconds).
<div id="carouselSpeed" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="1000"> <!-- 1 second -->
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Fast Slide">
</div>
<div class="carousel-item" data-bs-interval="5000"> <!-- 5 seconds -->
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slow Slide">
</div>
</div>
</div>
5. Pause on Hover
By default, Bootstrap pauses the carousel when users hover. Disable this using data-bs-pause="false".
<div id="carouselPause" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide">
</div>
</div>
</div>
6. Manually Controlling Carousel Using JavaScript
You can start, stop, and move slides with JavaScript.
<button class="btn btn-primary" onclick="startCarousel()">Start</button>
<button class="btn btn-danger" onclick="stopCarousel()">Stop</button>
<div id="manualCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/800x400" class="d-block w-100" alt="Slide">
</div>
</div>
</div>
<script>
var carousel = new bootstrap.Carousel(document.getElementById('manualCarousel'));
function startCarousel() {
carousel.cycle();
}
function stopCarousel() {
carousel.pause();
}
</script>
7. Carousel With Captions
Use .carousel-caption to add text over slides.
<div id="carouselCaptions" class="carousel slide" data-bs-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">
<div class="carousel-caption d-none d-md-block">
<h5>Slide Title</h5>
<p>Slide description goes here.</p>
</div>
</div>
</div>
</div>
8. Dark Theme Carousel
Use .carousel-dark to change arrow and dot colors.
<div id="carouselDark" class="carousel carousel-dark slide" data-bs-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">
</div>
</div>
</div>
Conclusion
Bootstrap 5's Carousel component is an easy way to create interactive slideshows. You can customize:
✔ Auto-play & manual control
✔ Slide speed & pause behavior
✔ Captions, dark mode & size adjustments
✔ JavaScript controls for advanced customization
Let me know if you need more examples or customizations!
0 comments:
Post a Comment