This code implements a testimonial slider using HTML, CSS, and JavaScript. The slider is powered by Swiper JS, a popular JavaScript library for building responsive touch sliders. The testimonial slider displays multiple slides at a time, with the ability to navigate between them using navigation buttons or keyboard controls. The slides are centered and have a small space between them.
The slider is set to loop continuously, so the last slide transitions seamlessly to the first one. It also includes pagination dots for visual navigation. Additionally, this code includes a function to resize the text within the testimonial quotes to fit within their containers. This testimonial slider is a useful component to showcase testimonials or feedback in a visually appealing and interactive way.
How to Create Testimonial Slider using HTML CSS
First of all, load the Swiper CSS by adding the following CDN link into the head tag of your HTML document.
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css'>
Create the HTML structure for the testimonial slider as follows:
<div class="container">
<div class="swiper swiperCarousel">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="https://i.pravatar.cc/200?img=31" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Amy Liu</h1>
<h2 class="title">CTO, Cybertech Solutions</h2>
</div>
<div class="quote-container">
<p class="quote">
I must admit, as a software developer, I was skeptical about the MindSync Neural Interface. But once I saw how it could transform not just the way I work but also how I engage with the world, I was sold. Its integration capability and responsiveness are unlike anything I've seen before. We're not just talking about a step forward in technology, but a quantum leap into the future.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="https://i.pravatar.cc/200?img=26" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Sarah Price</h1>
<h2 class="title">Sr. Technology Analyst</h2>
</div>
<div class="quote-container">
<p class="quote">
The MindSync Neural Interface is a game-changer in technology that's redefining the way we interact with digital devices. With the seamless and intuitive connection, it has reduced the cognitive load of my everyday tasks. As a busy professional, I no longer have to divide my attention across multiple devices. This revolutionary product has managed to marry convenience and functionality in a way I had never thought possible.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="https://i.pravatar.cc/200?img=69" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Dr. Miguel Torres</h1>
<h2 class="title">Head of Neurobiology, Central University</h2>
</div>
<div class="quote-container">
<p class="quote">
The day I started using the MindSync Neural Interface, I understood it wasn't just an ordinary gadget, but an extraordinary leap in technological innovation. Its user-friendly nature, mixed with the uncanny ability to understand and process my thoughts, is genuinely awe-inspiring. It's as if it took the immense complexity of the human brain and made it accessible, all without compromising my privacy or security.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="https://i.pravatar.cc/200?img=59" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Benjamin Moore</h1>
<h2 class="title">
Director of HCI, FutureTech
</h2>
</div>
<div class="quote-container">
<p class="quote">
The MindSync Neural Interface isn't just an upgrade, it's an evolution. The way it syncs effortlessly with my thought processes makes it feel like a natural extension of my mind. It's empowering and liberating to interact with my digital world in such a direct, fluid manner. This is a tool that makes technology feel less like a barrier and more like an ally.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="https://i.pravatar.cc/200?img=49" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Dr. Simone Laurent</h1>
<h2 class="title">Chief Neurologist, NeuroTech Hospital</h2>
</div>
<div class="quote-container">
<p class="quote">
As a neurologist, I can attest that the MindSync Neural Interface is an absolute marvel. The accuracy with which it translates neural signals into digital actions is astounding. But what impresses me more is how it manages to do so with such finesse, ensuring an unintrusive and seamless user experience. This is truly a leap in making technology more intuitively human.
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="card">
<img class="avatar" src="https://i.pravatar.cc/200?img=68" />
<svg class="quote-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="125px" height="125px">
<path
d="M 16.482422 8.9921875 A 1.50015 1.50015 0 0 0 15.943359 9.1074219 C 15.943359 9.1074219 13.068414 10.279429 10.357422 13.464844 C 7.6464301 16.650259 5 21.927419 5 30 A 1.50015 1.50015 0 0 0 5.015625 30.21875 A 8.5 8.5 0 0 0 13.5 39 A 8.5 8.5 0 0 0 13.5 22 A 8.5 8.5 0 0 0 8.7089844 23.480469 C 9.5777265 19.777157 11.122152 17.196657 12.642578 15.410156 C 14.931586 12.720571 17.056641 11.892578 17.056641 11.892578 A 1.50015 1.50015 0 0 0 16.482422 8.9921875 z M 37.482422 8.9921875 A 1.50015 1.50015 0 0 0 36.943359 9.1074219 C 36.943359 9.1074219 34.068414 10.279429 31.357422 13.464844 C 28.64643 16.650259 26 21.927419 26 30 A 1.50015 1.50015 0 0 0 26.015625 30.21875 A 8.5 8.5 0 0 0 34.5 39 A 8.5 8.5 0 0 0 34.5 22 A 8.5 8.5 0 0 0 29.708984 23.480469 C 30.577727 19.777157 32.122152 17.196657 33.642578 15.410156 C 35.931586 12.720571 38.056641 11.892578 38.056641 11.892578 A 1.50015 1.50015 0 0 0 37.482422 8.9921875 z"
/>
</svg>
<div class="header">
<h1 class="name">Jared Foster</h1>
<h2 class="title">Sr. Tech Journalist, Digital Frontier</h2>
</div>
<div class="quote-container">
<p class="quote">
As a technology journalist, I've seen numerous gadgets come and go. However, the MindSync Neural Interface isn't just a flash in the pan - it's here to revolutionize the way we perceive and interact with technology. The convenience it brings, coupled with its stellar performance, makes it more than just a device - it's an experience. One that is utterly transformative in the truest sense of the word.
</p>
</div>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
Style the slider using the following CSS styles:
@import url("https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Poppins&display=swap");
body {
background-color: #d5e1ef;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
width: 100vw;
}
.cd__main{
display: block !important;
background: #ddfcf5 !important;
min-height: 450px;
height: 100vh;
}
.container {
width: 100%;
height: 100%;
}
.card {
background-color: #f9fafe;
width: 550px;
height: 45%;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
padding: 30px 0 0 0;
transition: transform 400ms;
opacity: 0.5;
box-shadow: none;
}
.quote-icon {
position: absolute;
z-index: 0;
opacity: 0.05;
left: 3%;
top: 0;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 150px;
border: 5px solid #f9fafe;
box-shadow: 0 0 50px #ccc;
position: absolute;
top: 0;
left: 50%;
transform: translate(-60px, -60px);
z-index: 1;
}
.header {
margin: 50px 0 0 0;
text-align: center;
z-index: 1;
}
.name {
font-family: "Hammersmith One", sans-serif;
text-transform: uppercase;
font-size: 22px;
margin: 0;
}
.title {
font-family: "Hammersmith One", sans-serif;
text-transform: uppercase;
font-size: 14px;
font-weight: 400;
margin: 5px 0 0 0;
padding: 0 5px;
color: #7ccdc5;
}
.quote-container {
margin: 0;
height: 100%;
z-index: 1;
padding: 15px 30px 30px 30px;
overflow: hidden;
}
.quote {
width: 100%;
height: 95%;
font-family: "Poppins", sans-serif;
font-size: 12px;
text-align: center;
color: #73808c;
margin: 0;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
display: flex !important;
justify-content: center;
align-items: center;
}
.swiper-slide-active {
z-index: 1;
}
.swiper-slide-active .card {
box-shadow: 0 8px 30px -7px #c9dff0;
opacity: 1;
transform: scale(1.5);
}
.swiper {
margin-left: auto;
margin-right: auto;
}
.swiper-button-next:focus,
.swiper-button-prev:focus {
outline: none;
}
@media (max-height: 400px) {
.header {
margin: 40px 0 0 0;
}
.name {
font-size: 12px;
}
.title {
font-size: 10px;
}
.quote-container {
padding: 5px 20px 20px 20px;
}
.quote-icon {
width: 75px;
height: 75px;
}
.avatar {
width: 100px;
height: 100px;
transform: translate(-50px, -50px);
}
}
Now, load the Swiper JS by adding the following CDN links before closing the body tag:
<script src='https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/textfit/2.4.0/textFit.min.js'></script>
Finally, add the following JavaScript function to your project to initialize the swiper js slider.
/**
Swiper:
https://swiperjs.com/
**/
const swiper = new Swiper(".swiperCarousel", {
slidesPerView: 3,
centeredSlides: true,
spaceBetween: 10,
keyboard: {
enabled: true,
},
loop: true,
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
const slides = document.getElementsByClassName("swiper-slide");
for (const slide of slides) {
slide.addEventListener("click", () => {
const { className } = slide;
if (className.includes("swiper-slide-next")) {
swiper.slideNext();
} else if (className.includes("swiper-slide-prev")) {
swiper.slidePrev();
}
});
}
function resizeTextToFit() {
const quoteEls = document.getElementsByClassName('quote');
for (const el of quoteEls) {
el.style.width = el.offsetWidth;
el.style.height = el.offsetHeight;
}
textFit(quoteEls, { maxFontSize: 14 });
}
resizeTextToFit();
addEventListener("resize", (event) => {
resizeTextToFit();
});
That’s all! hopefully, you have successfully created a testimonial slider using HTML CSS & JavaScript. If you have any questions or suggestions, feel free to comment below.
