Responsive testimonial slider built with Swiper.js, featuring clean card layouts, smooth navigation controls, and optimized performance for seamless user experience across all devices.
Final output:
Final Output Code for Testimonial Slider using Swiper JS:
HTML
<div class="swiper testimonial-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="testimonial-card">
<div class="testimonial-card-header">
<div class="testimonial-card-quotes-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24"
fill="none" stroke="#2b7fff40" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path
d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
<path
d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z">
</path>
</svg>
</div>
</div>
<p class="testimonial-card-text">"Outstanding platform with exceptional support. The ROI was evident
from day
one. Highly recommend to any
serious business."</p>
<div class="testimonial-card-footer">
<img src="client.jpg" alt="">
<div>
<h5 class="client-name">Jacob Park</h5>
<span class="client-designation">Product Manager</span>
<br>
<span class="client-org">Innovation Labs</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>CSS
* {
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.testimonial-card {
/* max-width: 16rem; */
border: 2px solid #e2e8f0;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
transition: border-color .2s ease-in-out;
}
.testimonial-card:hover {
border-color: #2b7fff;
}
.testimonial-card-header {
position: relative;
}
.testimonial-card-quotes-icon {
width: 3rem;
position: absolute;
right: -1rem;
top: -1rem;
}
.testimonial-card-text {
margin: 1.5rem 0;
font-size: 1.125rem;
font-style: italic;
line-height: 1.625;
color: #314158;
}
.testimonial-card-footer {
border-top: 1px solid #f9f3f4;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 1rem;
align-items: center;
padding-top: 1.5rem;
}
.testimonial-card-footer img {
max-width: 100%;
border-radius: 50%;
}
.client-name {
font-size: 1rem;
font-weight: 600;
margin-bottom: .25rem;
}
.client-designation {
font-size: .875rem;
line-height: 1.4;
color: #62748e;
}
.client-org {
font-size: .75rem;
line-height: 1.3;
color: #90a1b9;
}
.swiper {
width: 80%;
height: 100%;
}
.swiper-button-prev,
.swiper-button-next {
cursor: pointer;
width: 1rem;
height: 1rem;
background: #caddfc72;
border-radius: 50%;
padding: 1rem;
}
.swiper-navigation-icon {
color: #2b7fff;
}JS
var swiper = new Swiper(".testimonial-swiper", {
slidesPerView: 3,
spaceBetween: 16,
breakpoints: {
0: {
slidesPerView: 1,
},
576: {
slidesPerView: 3,
},
769: {
slidesPerView: 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.
