bootstrap 5 carousel slider example with controls and indicators
hunzala
Created Nov 02, 2025
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/7.1.0/ionicons/ionicons.js"></script>
<div class="carousel-container">
<!-- Page Header -->
<div class="page-header">
<h1>Carousel Slider Examples</h1>
<p>Beautiful, responsive carousels with custom controls and indicators</p>
</div>
<!-- Hero Carousel -->
<div id="heroCarousel" class="carousel slide hero-carousel" data-bs-ride="carousel">
<!-- Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
</div>
<!-- Slides -->
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<div class="carousel-image" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
<div class="carousel-overlay">
<div class="carousel-content">
<span class="carousel-badge">New Arrival</span>
<h2 class="carousel-title">Discover Amazing Products</h2>
<p class="carousel-description">
Explore our latest collection of premium products designed to enhance your lifestyle and exceed your expectations.
</p>
<a href="#" class="carousel-btn">
Shop Now
<ion-icon name="arrow-forward"></ion-icon>
</a>
</div>
</div>
<div class="carousel-progress">
<div class="carousel-progress-bar"></div>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<div class="carousel-image" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
<div class="carousel-overlay">
<div class="carousel-content">
<span class="carousel-badge">Limited Time</span>
<h2 class="carousel-title">Special Sale Event</h2>
<p class="carousel-description">
Save up to 50% on selected items. Don't miss out on this incredible opportunity to get your favorites at amazing prices.
</p>
<a href="#" class="carousel-btn">
View Deals
<ion-icon name="pricetag"></ion-icon>
</a>
</div>
</div>
<div class="carousel-progress">
<div class="carousel-progress-bar"></div>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<div class="carousel-image" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
<div class="carousel-overlay">
<div class="carousel-content">
<span class="carousel-badge">Exclusive</span>
<h2 class="carousel-title">Premium Quality Guaranteed</h2>
<p class="carousel-description">
Experience the difference with our handpicked selection of premium quality products backed by our satisfaction guarantee.
</p>
<a href="#" class="carousel-btn">
Learn More
<ion-icon name="information-circle"></ion-icon>
</a>
</div>
</div>
<div class="carousel-progress">
<div class="carousel-progress-bar"></div>
</div>
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<ion-icon name="chevron-back" class="carousel-control-prev-icon"></ion-icon>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<ion-icon name="chevron-forward" class="carousel-control-next-icon"></ion-icon>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Product Carousel -->
<div class="product-carousel-section">
<div class="section-header">
<h2>Our Services</h2>
<p>Discover what makes us different</p>
</div>
<div id="productCarousel" class="carousel slide product-carousel" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row g-4">
<div class="col-md-4">
<div class="product-card">
<div class="product-icon">
<ion-icon name="rocket"></ion-icon>
</div>
<h3>Fast Delivery</h3>
<p>Get your orders delivered quickly with our express shipping options available worldwide.</p>
<a href="#" class="product-link">
Learn More
<ion-icon name="arrow-forward"></ion-icon>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-icon">
<ion-icon name="shield-checkmark"></ion-icon>
</div>
<h3>Secure Payment</h3>
<p>Shop with confidence using our secure payment gateway and buyer protection program.</p>
<a href="#" class="product-link">
Learn More
<ion-icon name="arrow-forward"></ion-icon>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-icon">
<ion-icon name="headset"></ion-icon>
</div>
<h3>24/7 Support</h3>
<p>Our dedicated support team is always ready to help you with any questions or concerns.</p>
<a href="#" class="product-link">
Learn More
<ion-icon name="arrow-forward"></ion-icon>
</a>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row g-4">
<div class="col-md-4">
<div class="product-card">
<div class="product-icon">
<ion-icon name="gift"></ion-icon>
</div>
<h3>Special Offers</h3>
<p>Enjoy exclusive deals and promotions available only to our valued customers.</p>
<a href="#" class="product-link">
Learn More
<ion-icon name="arrow-forward"></ion-icon>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-icon">
<ion-icon name="repeat"></ion-icon>
</div>
<h3>Easy Returns</h3>
<p>Not satisfied? Return your purchase hassle-free within 30 days for a full refund.</p>
<a href="#" class="product-link">
Learn More
<ion-icon name="arrow-forward"></ion-icon>
</a>
</div>
</div>
<div class="col-md-4">
<div class="product-card">
<div class="product-icon">
<ion-icon name="star"></ion-icon>
</div>
<h3>Premium Quality</h3>
<p>Every product is carefully selected and tested to ensure the highest quality standards.</p>
<a href="#" class="product-link">
Learn More
<ion-icon name="arrow-forward"></ion-icon>
</a>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
<ion-icon name="chevron-back" class="carousel-control-prev-icon"></ion-icon>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
<ion-icon name="chevron-forward" class="carousel-control-next-icon"></ion-icon>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Testimonial Carousel -->
<div class="testimonial-carousel-section">
<div class="section-header">
<h2 style="color: white;">What Our Clients Say</h2>
<p style="color: rgba(255,255,255,0.9);">Real feedback from real customers</p>
</div>
<div id="testimonialCarousel" class="carousel slide testimonial-carousel" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="testimonial-content">
<div class="quote-icon">❝</div>
<p class="testimonial-text">
"Absolutely amazing service! The quality exceeded my expectations and the delivery was incredibly fast. Highly recommend to anyone looking for premium products."
</p>
<div class="testimonial-author">
<div class="author-avatar">JD</div>
<div>
<div class="author-name">John Davidson</div>
<div class="author-position">CEO, TechStart Inc.</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="testimonial-content">
<div class="quote-icon">❝</div>
<p class="testimonial-text">
"Best shopping experience I've ever had online. The customer support team was incredibly helpful and responsive. Will definitely shop here again!"
</p>
<div class="testimonial-author">
<div class="author-avatar">SM</div>
<div>
<div class="author-name">Sarah Martinez</div>
<div class="author-position">Marketing Director</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="testimonial-content">
<div class="quote-icon">❝</div>
<p class="testimonial-text">
"Outstanding quality and attention to detail. Every product I've purchased has been exactly as described. This is now my go-to online store!"
</p>
<div class="testimonial-author">
<div class="author-avatar">MW</div>
<div>
<div class="author-name">Michael Wong</div>
<div class="author-position">Product Manager</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
<ion-icon name="chevron-back" class="carousel-control-prev-icon"></ion-icon>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
<ion-icon name="chevron-forward" class="carousel-control-next-icon"></ion-icon>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
* {
font-family: 'Roboto', sans-serif;
}
body {
background: #f8f9fa;
padding: 60px 20px;
}
.carousel-container {
max-width: 1400px;
margin: 0 auto;
}
/* Page Header */
.page-header {
text-align: center;
margin-bottom: 50px;
}
.page-header h1 {
font-size: 2.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
}
.page-header p {
color: #7f8c8d;
font-size: 1.1rem;
}
/* Main Hero Carousel */
.hero-carousel {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.15);
margin-bottom: 60px;
}
.carousel-item {
height: 600px;
position: relative;
}
.carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 100%);
display: flex;
align-items: center;
}
.carousel-content {
max-width: 600px;
padding: 0 80px;
color: white;
animation: slideInLeft 0.8s ease;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.carousel-badge {
display: inline-block;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
}
.carousel-title {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.2;
margin-bottom: 20px;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.carousel-description {
font-size: 1.2rem;
line-height: 1.8;
margin-bottom: 30px;
opacity: 0.95;
}
.carousel-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 35px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.carousel-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
color: white;
}
.carousel-btn ion-icon {
font-size: 22px;
}
/* Custom Controls */
.carousel-control-prev,
.carousel-control-next {
width: 60px;
height: 60px;
background: white;
border-radius: 50%;
opacity: 1;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.carousel-control-prev {
left: 30px;
}
.carousel-control-next {
right: 30px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
transform: translateY(-50%) scale(1.1);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 30px;
height: 30px;
background-image: none;
color: #2c3e50;
font-size: 30px;
}
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
color: white;
}
/* Custom Indicators */
.carousel-indicators {
bottom: 30px;
margin-bottom: 0;
}
.carousel-indicators [data-bs-target] {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid white;
margin: 0 8px;
transition: all 0.3s ease;
}
.carousel-indicators .active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 50px;
border-radius: 10px;
}
/* Product Carousel */
.product-carousel-section {
background: white;
padding: 50px;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
margin-bottom: 60px;
}
.section-header {
text-align: center;
margin-bottom: 40px;
}
.section-header h2 {
font-size: 2rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 10px;
}
.section-header p {
color: #7f8c8d;
}
.product-carousel .carousel-item {
height: auto;
padding: 20px;
}
.product-card {
background: #f8f9fa;
border-radius: 15px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.product-icon {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 48px;
color: white;
}
.product-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 15px;
}
.product-card p {
color: #7f8c8d;
line-height: 1.8;
margin-bottom: 20px;
}
.product-link {
color: #667eea;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.product-link:hover {
gap: 12px;
}
/* Testimonial Carousel */
.testimonial-carousel-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 60px 50px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
color: white;
}
.testimonial-carousel .carousel-item {
height: auto;
padding: 40px 20px;
}
.testimonial-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.quote-icon {
font-size: 4rem;
opacity: 0.3;
margin-bottom: 20px;
}
.testimonial-text {
font-size: 1.5rem;
line-height: 1.8;
margin-bottom: 30px;
font-style: italic;
}
.testimonial-author {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 80px;
height: 80px;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
color: #667eea;
}
.author-name {
font-size: 1.3rem;
font-weight: 700;
}
.author-position {
opacity: 0.9;
}
.testimonial-carousel-section .carousel-control-prev,
.testimonial-carousel-section .carousel-control-next {
background: rgba(255, 255, 255, 0.2);
}
.testimonial-carousel-section .carousel-control-prev:hover,
.testimonial-carousel-section .carousel-control-next:hover {
background: white;
}
.testimonial-carousel-section .carousel-control-prev-icon,
.testimonial-carousel-section .carousel-control-next-icon {
color: white;
}
.testimonial-carousel-section .carousel-control-prev:hover .carousel-control-prev-icon,
.testimonial-carousel-section .carousel-control-next:hover .carousel-control-next-icon {
color: #667eea;
}
/* Responsive */
@media (max-width: 992px) {
.carousel-item {
height: 500px;
}
.carousel-content {
padding: 0 40px;
}
.carousel-title {
font-size: 2.5rem;
}
.carousel-description {
font-size: 1rem;
}
.product-carousel-section,
.testimonial-carousel-section {
padding: 40px 30px;
}
}
@media (max-width: 768px) {
.carousel-item {
height: 400px;
}
.carousel-content {
padding: 0 30px;
}
.carousel-title {
font-size: 2rem;
}
.carousel-control-prev,
.carousel-control-next {
width: 45px;
height: 45px;
}
.carousel-control-prev {
left: 15px;
}
.carousel-control-next {
right: 15px;
}
.product-carousel-section,
.testimonial-carousel-section {
padding: 30px 20px;
}
.testimonial-text {
font-size: 1.2rem;
}
.page-header h1 {
font-size: 2rem;
}
}
/* Auto-play indicator */
.carousel-progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
background: rgba(255, 255, 255, 0.3);
}
.carousel-progress-bar {
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 0%;
animation: progressBar 5s linear;
}
@keyframes progressBar {
from { width: 0%; }
to { width: 100%; }
}
// Restart progress bar animation when slide changes
document.querySelectorAll('.carousel').forEach(carousel => {
carousel.addEventListener('slide.bs.carousel', function (e) {
const progressBars = this.querySelectorAll('.carousel-progress-bar');
progressBars.forEach(bar => {
bar.style.animation = 'none';
setTimeout(() => {
bar.style.animation = 'progressBar 5s linear';
}, 10);
});
});
});
// Pause carousel on hover
document.querySelectorAll('.carousel').forEach(carousel => {
carousel.addEventListener('mouseenter', function() {
bootstrap.Carousel.getInstance(this).pause();
});
carousel.addEventListener('mouseleave', function() {
bootstrap.Carousel.getInstance(this).cycle();
});
});
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!