Carousels & Slideshows
Rotating content displays with navigation controls
1 Basic Carousel
The simplest carousel with automatically sliding images.
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">...</div>
<div class="carousel-item">...</div>
</div>
<button class="carousel-control-prev">...</button>
<button class="carousel-control-next">...</button>
</div>data-bs-ride="carousel"
attribute starts auto-play. The first
.carousel-item
must have the
.active
class.
2 With Indicators
Add indicator dots to show the current slide and allow direct navigation.
<div class="carousel-indicators">
<button data-bs-slide-to="0" class="active"></button>
<button data-bs-slide-to="1"></button>
<button data-bs-slide-to="2"></button>
</div>3 With Captions
Add overlay text to your slides with
.carousel-caption
.
Mountain Landscapes
Discover breathtaking views of majestic peaks and serene valleys.
Urban Living
Explore the vibrant energy of modern cities and architecture.
Coastal Retreats
Relax with the soothing sound of waves and sandy shores.
.d-none .d-md-block
to hide on small screens where text might be unreadable.
4 Crossfade Effect
Change the default slide effect to a fade transition by adding
.carousel-fade
.
Smooth Fade Effect
Notice how images fade into each other rather than sliding.
Elegant Transition
Perfect for sophisticated galleries and portfolios.
Professional Experience
Create a more refined atmosphere for your content.
5 Practical Example: Customer Testimonials
Carousels aren't just for images. Use them to showcase testimonials, reviews, or any content.
"This product completely transformed the way we work. Highly recommend!"
"Exceptional customer service and an incredible product. Five stars well deserved."
"Easy to use, powerful, and exactly what we needed. Couldn't be happier!"
🎯 Auto-play
data-bs-ride="carousel"
⏱️ Interval
data-bs-interval="5000"
🔄 Infinite Loop
Automatic by default
⌨️ Keyboard Navigation
Left/right arrows
👆 Touch/Swipe
On mobile devices
♿ Accessibility
ARIA included
🎯 Key Takeaways About Carousels
- Versatile: Works with images, text, cards, and any HTML content
- Configurable: Control over intervals, auto-play, transition effects
- Accessible: Includes keyboard navigation and ARIA attributes
- Responsive: Automatically adapts to screen size
- No JavaScript: Works entirely with data attributes