bootstrap 5 testimonial slider using carousel
hunzala
Created Nov 01, 2025
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
<div class="container testimonial-section">
<!-- Section Header -->
<div class="section-header">
<h2>What Our Clients Say</h2>
<p>Don't just take our word for it - hear from our satisfied customers</p>
</div>
<!-- Testimonial Carousel -->
<div id="testimonialCarousel" class="carousel slide testimonial-carousel" data-bs-ride="carousel">
<!-- Indicators -->
<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>
<button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="4"></button>
</div>
<!-- Carousel Items -->
<div class="carousel-inner">
<!-- Testimonial 1 -->
<div class="carousel-item active">
<div class="testimonial-item">
<div class="quote-icon">❝</div>
<div class="star-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<p class="testimonial-text">
Working with this team has been an absolute game-changer for our business. Their attention to detail and commitment to excellence is unmatched. We've seen a 300% increase in conversions since launching our new website!
</p>
<div class="testimonial-author">
<div class="author-image">JD</div>
<div class="author-info">
<div class="author-name">John Davidson</div>
<div class="author-position">CEO & Founder</div>
<div class="author-company">TechStart Inc.</div>
</div>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="carousel-item">
<div class="testimonial-item">
<div class="quote-icon">❝</div>
<div class="star-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<p class="testimonial-text">
The level of professionalism and expertise demonstrated throughout our project was outstanding. They delivered ahead of schedule and exceeded all our expectations. Highly recommend their services!
</p>
<div class="testimonial-author">
<div class="author-image">SM</div>
<div class="author-info">
<div class="author-name">Sarah Martinez</div>
<div class="author-position">Marketing Director</div>
<div class="author-company">Global Solutions Ltd.</div>
</div>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="carousel-item">
<div class="testimonial-item">
<div class="quote-icon">❝</div>
<div class="star-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<p class="testimonial-text">
From concept to launch, every step was seamless. Their creative approach and technical skills helped us stand out in a crowded market. Our customers love the new design and functionality!
</p>
<div class="testimonial-author">
<div class="author-image">MW</div>
<div class="author-info">
<div class="author-name">Michael Wong</div>
<div class="author-position">Product Manager</div>
<div class="author-company">Innovation Labs</div>
</div>
</div>
</div>
</div>
<!-- Testimonial 4 -->
<div class="carousel-item">
<div class="testimonial-item">
<div class="quote-icon">❝</div>
<div class="star-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<p class="testimonial-text">
Best investment we've made for our online presence. The team was responsive, creative, and delivered exceptional results. Our engagement metrics have more than doubled since the redesign!
</p>
<div class="testimonial-author">
<div class="author-image">EJ</div>
<div class="author-info">
<div class="author-name">Emily Johnson</div>
<div class="author-position">E-commerce Manager</div>
<div class="author-company">Fashion Forward</div>
</div>
</div>
</div>
</div>
<!-- Testimonial 5 -->
<div class="carousel-item">
<div class="testimonial-item">
<div class="quote-icon">❝</div>
<div class="star-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<p class="testimonial-text">
Their expertise in both design and development is remarkable. They took our vision and turned it into reality, while also providing valuable insights that improved the final product immensely.
</p>
<div class="testimonial-author">
<div class="author-image">RT</div>
<div class="author-info">
<div class="author-name">Robert Taylor</div>
<div class="author-position">Operations Director</div>
<div class="author-company">SmartBiz Corp</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonialCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Alternative: Testimonial Grid (Static) -->
<div class="testimonial-grid">
<div class="testimonial-card">
<div class="quote-icon">❝</div>
<div class="star-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<p class="testimonial-text">
Outstanding service and results. They transformed our digital presence completely!
</p>
<div class="testimonial-author">
<div class="author-image">AL</div>
<div class="author-info">
<div class="author-name">Anna Lee</div>
<div class="author-position">Creative Director</div>
<div class="author-company">Design Studio</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote-icon">❝</div>
<div class="star-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<p class="testimonial-text">
Professional, reliable, and incredibly talented. We couldn't be happier with the results!
</p>
<div class="testimonial-author">
<div class="author-image">DK</div>
<div class="author-info">
<div class="author-name">David Kim</div>
<div class="author-position">Business Owner</div>
<div class="author-company">Kim Enterprises</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote-icon">❝</div>
<div class="star-rating">
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
<span class="star">★</span>
</div>
<p class="testimonial-text">
Their innovative approach and dedication to quality made all the difference for our project.
</p>
<div class="testimonial-author">
<div class="author-image">LP</div>
<div class="author-info">
<div class="author-name">Lisa Parker</div>
<div class="author-position">VP of Sales</div>
<div class="author-company">SalesPro Inc</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 60px 0;
}
.testimonial-section {
max-width: 1200px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 60px;
}
.section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: white;
margin-bottom: 15px;
}
.section-header p {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
}
/* Carousel Container */
.testimonial-carousel {
background: white;
border-radius: 20px;
padding: 60px 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
position: relative;
}
/* Testimonial Card */
.testimonial-item {
text-align: center;
padding: 0 40px;
}
.quote-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 30px;
font-size: 2rem;
color: white;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.testimonial-text {
font-size: 1.2rem;
line-height: 1.8;
color: #2c3e50;
margin-bottom: 35px;
font-style: italic;
position: relative;
}
.testimonial-text::before {
content: '"';
font-size: 4rem;
color: rgba(102, 126, 234, 0.2);
position: absolute;
left: -20px;
top: -20px;
font-family: Georgia, serif;
}
.testimonial-author {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.author-image {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.8rem;
border: 4px solid white;
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}
.author-info {
text-align: center;
}
.author-name {
font-size: 1.3rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 5px;
}
.author-position {
font-size: 1rem;
color: #7f8c8d;
margin-bottom: 10px;
}
.author-company {
font-size: 0.9rem;
color: #667eea;
font-weight: 600;
}
/* Star Rating */
.star-rating {
display: flex;
gap: 5px;
justify-content: center;
margin-bottom: 25px;
}
.star {
color: #ffc107;
font-size: 1.2rem;
}
/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
opacity: 1;
transition: all 0.3s ease;
}
.carousel-control-prev {
left: -25px;
}
.carousel-control-next {
right: -25px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
transform: translateY(-50%) scale(1.1);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
width: 20px;
height: 20px;
}
/* Carousel Indicators */
.carousel-indicators {
bottom: -50px;
margin-bottom: 0;
}
.carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid white;
margin: 0 5px;
transition: all 0.3s ease;
}
.carousel-indicators button.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 40px;
border-radius: 10px;
}
/* Alternative Grid Layout */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.testimonial-card {
background: white;
border-radius: 15px;
padding: 35px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
transition: all 0.3s ease;
position: relative;
}
.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.testimonial-card .quote-icon {
width: 45px;
height: 45px;
font-size: 1.5rem;
margin: 0 0 20px 0;
}
.testimonial-card .testimonial-text {
font-size: 1rem;
margin-bottom: 25px;
}
.testimonial-card .testimonial-text::before {
font-size: 3rem;
left: -10px;
top: -15px;
}
.testimonial-card .testimonial-author {
flex-direction: row;
justify-content: flex-start;
text-align: left;
}
.testimonial-card .author-image {
width: 60px;
height: 60px;
font-size: 1.3rem;
}
.testimonial-card .author-info {
text-align: left;
}
.testimonial-card .author-name {
font-size: 1.1rem;
}
.testimonial-card .author-position {
font-size: 0.9rem;
}
.testimonial-card .star-rating {
justify-content: flex-start;
margin-bottom: 20px;
}
/* Responsive */
@media (max-width: 768px) {
.testimonial-carousel {
padding: 40px 20px;
}
.testimonial-item {
padding: 0 20px;
}
.testimonial-text {
font-size: 1rem;
}
.carousel-control-prev,
.carousel-control-next {
display: none;
}
.section-header h2 {
font-size: 2rem;
}
}
/* Animation */
.carousel-item {
transition: transform 0.6s ease-in-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.carousel-item.active .testimonial-item {
animation: fadeInUp 0.6s ease;
}
/* Video Testimonial Badge */
.video-badge {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
// Initialize carousel with custom options
const testimonialCarousel = new bootstrap.Carousel('#testimonialCarousel', {
interval: 5000,
wrap: true,
touch: true
});
// Optional: Pause on hover
document.querySelector('#testimonialCarousel').addEventListener('mouseenter', () => {
testimonialCarousel.pause();
});
document.querySelector('#testimonialCarousel').addEventListener('mouseleave', () => {
testimonialCarousel.cycle();
});
Comments (0)
Login to leave a comment
Login
No comments yet. Be the first!