This testimonial slider section HTML CSS Swiper JS tutorial shows you how to build a responsive testimonial section with a two-column layout. The left side has a quote icon, heading, and navigation buttons, while the right side has a Swiper slider with testimonial cards that partially peek in from the edge to hint at more content.
Final output:
What our customers say
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
1. Let’s start by adding the Bootstrap Icons and Swiper CSS links in your head. Then add the Swiper JS link right before the closing body tag.
<!-- in head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<!-- before closing body -->
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>2. Start with a section element with the class section-testimonials. Inside it, add a .testimonials-wrapper div with two .col divs inside it.
<section class="section-testimonials">
<div class="testimonials-wrapper">
<div class="col"></div>
<div class="col"></div>
</div>
</section>Reset margins, set the font family, and add a blue background on the section. Style .testimonials-wrapper with a two-column grid giving the left column less space than the right. On mobile, collapse to a single column.
* {
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.section-testimonials {
background-color: #5072a7;
}
.section-testimonials .testimonials-wrapper {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 4rem;
padding: 3rem 0 3rem 2rem;
position: relative;
max-width: 90rem;
margin-inline: auto;
}
@media screen and (max-width: 576px) {
.section-testimonials .testimonials-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.section-testimonials .col {
min-width: 0;
}Output:
3. Fill in the first .col with .testimonials-left. Inside it, add the .testimonial-title div with the quote icon and heading.
<div class="col">
<div class="testimonials-left">
<div class="testimonial-title">
<i class="bi bi-quote"></i>
<h2>What our customers say</h2>
</div>
</div>
</div>Use flex-direction: column with justify-content: space-between on .testimonials-left so the title and controls are pushed to opposite ends. Use clamp() on the heading font size so it scales smoothly between screen sizes.
.section-testimonials .testimonials-left {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
height: 100%;
}
.section-testimonials .bi-quote {
font-size: 5rem;
}
.section-testimonials .testimonial-title {
color: #fff;
}
.section-testimonials .testimonial-title h2 {
font-size: clamp(2.25rem, calc(2.25vw + 1rem), 3rem);
text-transform: capitalize;
font-weight: 700;
line-height: 1.1;
}
@media screen and (max-width: 576px) {
.section-testimonials .testimonial-title h2 {
padding-right: 2rem;
}
}Output:
What our customers say
4. Fill in the second .col with the .testimonial-swiper div. Swiper needs both the swiper class and your custom testimonial-swiper class on the same div. Inside it, add the swiper-wrapper with your slides. Inside each swiper-slide, add a .card with an image, a name, star ratings, and a review text.
<div class="col">
<div class="swiper testimonial-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card">
<div class="img-wrapper">
<img src="headshot.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Card title</h3>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<p class="card-text">"Some dummy text for the testimonial card."</p>
</div>
</div>
</div>
<!-- add more slides -->
</div>
</div>
</div>Style the .testimonial-swiper with height: 100% so it fills the column. Add padding-right so the last visible card doesn’t get clipped at the edge. Style each .card with a white background and a box-shadow.
.section-testimonials .testimonial-swiper {
padding-right: 1rem;
height: 100%;
}
.section-testimonials .card {
border: none;
height: 100%;
background-color: #fff;
box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, .18);
}
.section-testimonials .card img {
max-width: 100%;
}
.section-testimonials .card-body {
flex: 1 1 auto;
padding: 1rem;
}
.section-testimonials .card-body h3 {
font-weight: 500;
line-height: 1.2;
font-size: 1.25rem;
margin-bottom: .5rem;
}
.section-testimonials .star {
color: #ffc107;
padding-right: .25rem;
}
.section-testimonials .card-text {
margin-top: .5rem;
line-height: 1.5;
}Output:
What our customers say
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
5. Initialize Swiper with JavaScript. Pass in .testimonial-swiper as the target. Set slidesPerView to 2.3 so part of the next card peeks in from the right, hinting to the user that there are more cards to scroll through. Use breakpoints to show fewer slides on smaller screens. Then pass in the navigation option with the prev and next button selectors to wire up the arrows.
document.addEventListener("DOMContentLoaded", () => {
var swiper = new Swiper(".testimonial-swiper", {
slidesPerView: 2.3,
spaceBetween: 16,
breakpoints: {
0: {
slidesPerView: 1.1,
},
576: {
slidesPerView: 1.7,
},
769: {
slidesPerView: 2.3,
},
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});Now add the .swiper-controls div inside .testimonials-left, after the .testimonial-title. The prev and next buttons go here so they sit below the heading on the left side. Swiper wires them up automatically when you pass in the navigation option in the JS.
<div class="testimonials-left">
<div class="testimonial-title">
<i class="bi bi-quote"></i>
<h2>What our customers say</h2>
</div>
<div class="swiper-controls">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>Output:
What our customers say
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
6. Lastly, let’s style the swiper control buttons. Set the buttons to position: static so they sit inside the controls div instead of being positioned by Swiper. Give them a circular white background with padding to make them look like icon buttons.
.section-testimonials .swiper-controls {
display: flex;
gap: .5rem;
}
.section-testimonials .swiper-button-prev,
.section-testimonials .swiper-button-next {
cursor: pointer;
width: 1rem;
height: 1rem;
background: #f1f1f1;
border-radius: 50%;
padding: 1rem;
position: static;
margin: 0;
}
.section-testimonials .swiper-button-disabled {
opacity: .7;
}
.section-testimonials .swiper-navigation-icon {
color: #000;
}Output:
What our customers say
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Card title 1
“Some dummy text you don’t need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar.”
Final Output Code for Testimonial Slider Section Swiper JS #2:
HTML
<section class="section-testimonials">
<div class="testimonials-wrapper">
<div class="col">
<div class="testimonials-left">
<div class="testimonial-title">
<i class="bi bi-quote"></i>
<h2>What our customers say</h2>
</div>
<div class="swiper-controls">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<div class="col">
<div class="swiper testimonial-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card">
<div class="img-wrapper">
<img src="headshot-1.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Card title 1</h3>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<p class="card-text">"Some dummy text you don't need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar."</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div class="img-wrapper">
<img src="headshot-2.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Card title 2</h3>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<p class="card-text">"Some dummy text you don't need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar."</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div class="img-wrapper">
<img src="headshot-3.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Card title 3</h3>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<p class="card-text">"Some dummy text you don't need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar."</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div class="img-wrapper">
<img src="headshot-4.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Card title 4</h3>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<p class="card-text">"Some dummy text you don't need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar."</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div class="img-wrapper">
<img src="headshot-5.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Card title 5</h3>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<p class="card-text">"Some dummy text you don't need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar."</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<div class="img-wrapper">
<img src="headshot-6.jpg" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Card title 6</h3>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<i class="bi bi-star-fill star"></i>
<p class="card-text">"Some dummy text you don't need to read. Since you have decided to read, do like, share, comment and subscribe to Coding Yaar."</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>CSS
* {
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.section-testimonials {
background-color: #5072a7;
}
.section-testimonials .testimonials-wrapper {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 4rem;
padding: 3rem 0 3rem 2rem;
position: relative;
max-width: 90rem;
margin-inline: auto;
}
@media screen and (max-width: 576px) {
.section-testimonials .testimonials-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.section-testimonials .col {
min-width: 0;
}
.section-testimonials .testimonials-left {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
height: 100%;
}
.section-testimonials .bi-quote {
font-size: 5rem;
}
.section-testimonials .testimonial-title {
color: #fff;
}
.section-testimonials .testimonial-title h2 {
font-size: clamp(2.25rem, calc(2.25vw + 1rem), 3rem);
text-transform: capitalize;
font-weight: 700;
line-height: 1.1;
}
@media screen and (max-width: 576px) {
.section-testimonials .testimonial-title h2 {
padding-right: 2rem;
}
}
.section-testimonials .testimonial-swiper {
padding-right: 1rem;
height: 100%;
}
.section-testimonials .card {
border: none;
height: 100%;
background-color: #fff;
box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, .18);
}
.section-testimonials .card img {
max-width: 100%;
}
.section-testimonials .card-body {
flex: 1 1 auto;
padding: 1rem;
}
.section-testimonials .card-body h3 {
font-weight: 500;
line-height: 1.2;
font-size: 1.25rem;
margin-bottom: .5rem;
}
.section-testimonials .star {
color: #ffc107;
padding-right: .25rem;
}
.section-testimonials .card-text {
margin-top: .5rem;
line-height: 1.5;
}
.section-testimonials .swiper-controls {
display: flex;
gap: .5rem;
}
.section-testimonials .swiper-button-prev,
.section-testimonials .swiper-button-next {
cursor: pointer;
width: 1rem;
height: 1rem;
background: #f1f1f1;
border-radius: 50%;
padding: 1rem;
position: static;
margin: 0;
}
.section-testimonials .swiper-button-disabled {
opacity: .7;
}
.section-testimonials .swiper-navigation-icon {
color: #000;
}JS:
document.addEventListener("DOMContentLoaded", () => {
var swiper = new Swiper(".testimonial-swiper", {
slidesPerView: 2.3,
spaceBetween: 16,
breakpoints: {
0: {
slidesPerView: 1.1,
},
576: {
slidesPerView: 1.7,
},
769: {
slidesPerView: 2.3,
},
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
