Testimonial Slider in HTML CSS & JavaScript
The main purpose of a Testimonial Slider Shows Testimonial Submitted by your happy Customers. A testimonial is a written or spoken statement that expresses a person’s opinion. Testimonials typically include details about the person providing the testimonial, their background Testimonials are often used in marketing and advertising to build trust and credibility with potential customers or clients.
Watch Video Tutorial
In this tutorial blog we are going to create responsive Testimonial in HTML CSS and JavaScript from Scratch.
Lets start with HTML [Source Code]
First we need to create basic starting template with required links of Swiper Slider, CSS CDN links in head section of html file and JavaScript CDN file End of the body tag in html file .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Testimonial Slider </title>
<!-- Swiper Slider cdn link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
</head>
<body>
<div class="testimonial">
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
</body>
</html>
<div class="testimonial">
<div class="section-dis">
<p>Customer reviews are a valuable source <br>of information for both businesses and consumers.</p>
</div>
<h1><b>Customer</b> Voice :<br> <b>Here</b> <b>What</b> Thay Say!</h1>
<div class="testimonial-slide">
<div class="swiper-pagination"></div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>
<h4>Paul Trueman</h4>
<p>EQUNTA APP</p>
Working with Courtney Davis as our UI designer was an absolute pleasure. Her
attention
to detail and creative approach brought our vision to life. The user interface she designed
exceeded our
expectations, and we received positive feedback from our clients. Highly recommended! 1
</div>
</div>
<div class="swiper-slide">
<div>
<h4>Olivia Oldman</h4>
<p>EQUNTA APP</p>
Working with Courtney Davis as our UI designer was an absolute pleasure. Her
attention
to detail and creative approach brought our vision to life. The user interface she designed
exceeded our
expectations, and we received positive feedback from our clients. Highly recommended! 1
</div>
</div>
<div class="swiper-slide">
<div>
<h4>Oscar Oewman</h4>
<p>EQUNTA APP</p>
Working with Courtney Davis as our UI designer was an absolute pleasure. Her
attention
to detail and creative approach brought our vision to life. The user interface she designed
exceeded our
expectations, and we received positive feedback from our clients. Highly recommended! 1
</div>
</div>
</div>
</div>
</div>
</div>
Output Screenshot :
Now lets start our CSS code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.testimonial {
width: 100%;
padding: 50px 5%;
}
.section-dis {
display: flex;
justify-content: flex-end;
overflow: hidden;
}
.section-dis p {
margin-right: 30%;
display: inline;
position: relative;
font-size: 13px;
color: rgba(0, 0, 0, 0.288);
}
.testimonial .section-dis p:after {
content: "";
position: absolute;
width: 200%;
height: 1px;
background-color: rgba(0, 0, 0, 0.495);
left: 100%;
top: 45%;
}
.testimonial h1 {
margin: 40px 0px;
text-align: center;
font-size: 50px;
font-weight: 200;
}
.testimonial-slide {
position: relative;
}
.swiper-pagination-bullets.swiper-pagination-horizontal {
top: 0;
}
.swiper-pagination {
top: 0px;
z-index: 10;
}
.swiper-pagination-bullet:nth-child(1),
.swiper-pagination-bullet:nth-child(2),
.swiper-pagination-bullet:nth-child(3) {
padding: 5px 10px;
border-radius: 50%;
background-size: cover;
width: auto;
height: 80px;
width: 80px;
font-size: 0px;
color: #000;
opacity: 1;
}
.swiper-pagination-bullet:nth-child(1) {
background-image: url(images/1.jpg);
position: absolute;
left: 35%;
}
.swiper-pagination-bullet:nth-child(2) {
background-image: url(images/2.jpg);
top: 10%;
left: 45%;
position: absolute;
}
.swiper-pagination-bullet:nth-child(3) {
background-image: url(images/3.jpg);
position: absolute;
left: 55%;
}
.swiper-pagination-bullet-active {
color: #fff;
border: 2px solid orange;
}
.swiper-pagination-bullet:hover {
border: 2px solid rgb(255, 255, 255);
}
.swiper-slide {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide div {
color: #0000008c;
padding-top: 150px;
width: 50%;
text-align: center;
line-height: 30px;
}
.swiper-slide div h4 {
color: black;
margin-bottom: 5px;
}
.swiper-slide div P {
color: black;
font-size: 12px;
margin-bottom: 20px;
}
Media Query Code for Responsive Design
@media (max-width:1000px) {
.swiper-pagination-bullet:nth-child(1),
.swiper-pagination-bullet:nth-child(3),
.swiper-pagination-bullet:nth-child(2) {
position: static;
}
.testimonial p:after {
display: none;
}
.section-dis {
justify-content: center;
}
.section-dis p {
width: 80%;
text-align: center;
margin-right: 0;
}
.testimonial h1 {
font-size: 30px;
margin-bottom: 30px;
}
.swiper-slide div {
width: 80%;
}
}
Below Tutorial for beginners How To Create Responsive Testimonials in HTML CSS and JavaScript .
click on video to view and Don’t Forget to subscribe Our Channel
Below The output
Testimonials in HTML CSS
4 Videos
