Hello friend, I hope you are doing and creating an excellent project. Today in this blog, you will learn to make a responsive Testimonial Slider in HTML CSS and JavaScript/SwiperJs. There are lots of Sliding Card that I have created using HTML and CSS only and HTML CSS and JavaScript with swiperjs.
Testimonials are the section that contains reviews of the products and services. As we can see on the coffee shop website there will be a review, where many reviews of the different person’s kept about that coffee.
Have a quick look at the given image of our project [Testimonial Slider], as you can see on the given image there is an image of a person and the review text of that person on the product or services, the bottom of the image there is a quote icon and person’s name and job. Technically there are two buttons on the right and left sides, and three-dot, which indicates that it is slideable. Actually when we click on the nav button that will slide right or left and another person’s quote will appear. We can slide those content by grabbing and sliding the mouse right or left.
Let’s watch the real demo of this testimonial and all the HTMLÂ CSS and JavaScript code that I have used to create this project [Testimonial Slider].
Testimonial Slider in HTML CSS & JavaScript | Video Tutorial
I have provided all the HTML CSS and JavaScript code that I have used to create this Testimonial Slider. Before getting into the source code file, I would like to explain the given video tutorial briefly.
As you have seen in the video tutorial of [Testimonial Slider], at first there was an image of some review text and the name and jot of the person. Bottom of that testimonial content there are three dots and on the right and left side, there is two nav button. When I clicked on the right button, then that content slid left side and right-sided content appeared, similarly when I clicked on the left side button, the content slid right side and left-sided content appeared. Also, I slid that content just by grabbing the content and moving the mouse right or left.
We saw that our testimonial was fully responsive, when I decreased the width of the testimonial it fitted according to the screen. When our testimonial width came as our normal tablet screen sizes, then its nav button disappear because we can slide it by finger too.
I hope now you can create this testimonial using HTML CSS and JavaScript with SwiperJs. If you are feeling difficulty creating this testimonial, you can take the source code that I have given below.
You Might Like This:
Testimonial Slider [Source Code]
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Testimonial Slider</title>
<!-- Swiper CSS -->
<link rel="stylesheet" href="css/swiper-bundle.min.css" />
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />
<!-- Boxicons CSS -->
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<section class="container">
<div class="testimonial mySwiper">
<div class="testi-content swiper-wrapper">
<div class="slide swiper-slide">
<img src="#" alt="" class="image" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
saepe provident dolorem a quaerat quo error facere nihil deleniti
eligendi ipsum adipisci, fugit, architecto amet asperiores
doloremque deserunt eum nemo.
</p>
<i class="bx bxs-quote-alt-left quote-icon"></i>
<div class="details">
<span class="name">Marnie Lotter</span>
<span class="job">Web Developer</span>
</div>
</div>
<div class="slide swiper-slide">
<img src="#" alt="" class="image" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
saepe provident dolorem a quaerat quo error facere nihil deleniti
eligendi ipsum adipisci, fugit, architecto amet asperiores
doloremque deserunt eum nemo.
</p>
<i class="bx bxs-quote-alt-left quote-icon"></i>
<div class="details">
<span class="name">Marnie Lotter</span>
<span class="job">Web Developer</span>
</div>
</div>
<div class="slide swiper-slide">
<img src="#" alt="" class="image" />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
saepe provident dolorem a quaerat quo error facere nihil deleniti
eligendi ipsum adipisci, fugit, architecto amet asperiores
doloremque deserunt eum nemo.
</p>
<i class="bx bxs-quote-alt-left quote-icon"></i>
<div class="details">
<span class="name">Marnie Lotter</span>
<span class="job">Web Developer</span>
</div>
</div>
</div>
<div class="swiper-button-next nav-btn"></div>
<div class="swiper-button-prev nav-btn"></div>
<div class="swiper-pagination"></div>
</div>
</section>
<!-- Swiper JS -->
<script src="js/swiper-bundle.min.js"></script>
<!-- JavaScript -->
<script src="js/script.js"></script>
</body>
</html>
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #e3f2fd;
}
.testimonial {
position: relative;
max-width: 900px;
width: 100%;
padding: 50px 0;
overflow: hidden;
}
.testimonial .image {
height: 170px;
width: 170px;
object-fit: cover;
border-radius: 50%;
}
.testimonial .slide {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 30px;
height: 100%;
width: 100%;
}
.slide p {
text-align: center;
padding: 0 160px;
font-size: 14px;
font-weight: 400;
color: #333;
}
.slide .quote-icon {
font-size: 30px;
color: #4070f4;
}
.slide .details {
display: flex;
flex-direction: column;
align-items: center;
}
.details .name {
font-size: 14px;
font-weight: 600;
color: #333;
}
.details .job {
font-size: 12px;
font-weight: 400;
color: #333;
}
/* swiper button css */
.nav-btn {
height: 40px;
width: 40px;
border-radius: 50%;
transform: translateY(30px);
background-color: rgba(0, 0, 0, 0.1);
transition: 0.2s;
}
.nav-btn:hover {
background-color: rgba(0, 0, 0, 0.2);
}
.nav-btn::after,
.nav-btn::before {
font-size: 20px;
color: #fff;
}
.swiper-pagination-bullet {
background-color: rgba(0, 0, 0, 0.8);
}
.swiper-pagination-bullet-active {
background-color: #4070f4;
}
@media screen and (max-width: 768px) {
.slide p {
padding: 0 20px;
}
.nav-btn {
display: none;
}
}
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
grabCursor: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
If you face any difficulties while creating your Testimonial Slider or your code is not working as expected, you can download the source code files for this Review Slider for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
