Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Responsive Testimonial Slider" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Responsive Testimonial Slider" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS, and JavaScript code below.
Responsive Testimonial Slider [Source Code]
To get the following HTML, CSS & JS code for the Responsive Testimonial Slider project. You need to create three files one is an HTML file, the second one is a CSS file and another one is a JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code, a .css extension for CSS code, and .js for JavaScript code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SwiperJS CSS link-->
<link rel="stylesheet" href="sliderJsFiles/swiper-bundle.min.css" />
<!--Normal CSS link-->
<link rel="stylesheet" href="style.css">
<!-- BoxIcons -->
<link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" />
<title>Responsive Testimonial Slider</title>
</head>
<body>
<section class="container">
<div class="slider-wrapper mySwiper">
<div class="slider-wrapper-content swiper-wrapper">
<div class="slide swiper-slide">
<img src="images/profile1.jpg" alt="" class="image" />
<i class="bx bxs-quote-alt-left "></i>
<p>
Working with XYZ Web Development was an absolute pleasure. Their team of talented developers
took our outdated website and transformed it into a modern and user-friendly platform. They were
attentive to our needs, responsive to our feedback, and delivered exceptional results within the
agreed-upon timeline.
</p>
<i class="bx bxs-quote-alt-right "></i>
<div class="information">
<span class="name">John D.</span>
<span class="field">Front-end Developer</span>
</div>
</div>
<div class="slide swiper-slide">
<img src="images/profile2.jpg" alt="" class="image" />
<i class="bx bxs-quote-alt-left"></i>
<p>
I am thoroughly impressed with the professionalism and expertise of the team at ABC Web
Solutions. They built a custom website for my business that exceeded my expectations. From the
initial consultation to the final launch, they were attentive to detail, responsive to my ideas,
and provided valuable suggestions to enhance the site's functionality.
</p>
<i class="bx bxs-quote-alt-right "></i>
<div class="information">
<span class="name">Michael T.</span>
<span class="field">Programmer</span>
</div>
</div>
<div class="slide swiper-slide">
<img src="images/profile3.jpg" alt="" class="image" />
<i class="bx bxs-quote-alt-left "></i>
<p>
I want to express my gratitude to the talented developers at DEF Tech Solutions for their
outstanding work on our e-commerce website. They seamlessly integrated complex features, such as
a secure payment system and inventory management, to create a smooth and efficient online
shopping experience.
</p>
<i class="bx bxs-quote-alt-right "></i>
<div class="information">
<span class="name">Emily M.</span>
<span class="field">Full Stack Developer</span>
</div>
</div>
<div class="slide swiper-slide">
<img src="images/profile4.jpg" alt="" class="image" />
<i class="bx bxs-quote-alt-left "></i>
<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-right "></i>
<div class="information">
<span class="name">Samantha L.</span>
<span class="field">UI/UX designer</span>
</div>
</div>
</div>
<div class="swiper-button-next button"></div>
<div class="swiper-button-prev button"></div>
<div class="swiper-pagination swiper-btn"></div>
</div>
</section>
<!-- SwiperJs Javascript -->
<script src="sliderJsFiles/swiper-bundle.min.js"></script>
<!-- Normal JavaScript -->
<script src="index.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: black;
background-color: rgb(255, 200, 219);
}
.slider-wrapper {
width: 100%;
max-width: 800px;
position: relative;
padding: 50px 0;
overflow: hidden;
}
.slider-wrapper .image {
height: 150px;
width: 150px;
border-radius: 50%;
object-fit: cover;
border: 5px solid red;
}
.slider-wrapper .slide {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
row-gap: 20px;
}
.slide p {
text-align: center;
padding: 0 120px;
font-size: 15px;
font-weight: 400;
}
.slide i {
color: red;
font-size: 32px;
}
.slide .information {
display: flex;
flex-direction: column;
align-items: center;
}
.information .name {
font-size: 15px;
font-weight: 600;
}
.information .field {
font-size: 12px;
font-weight: 400;
}
.button {
height: 40px;
width: 40px;
font-size: 6px;
border-radius: 50%;
transform: translateY(30px);
background-color: red;
transition: 0.2s;
}
.button::after,
.button::before {
font-size: 20px;
font-weight: 700;
color: white;
}
.swiper-pagination-bullet-active {
background-color: red;
}
@media screen and (max-width: 768px) {
.button {
display: none;
}
.slide p {
padding: 0 25px;
}
}
JavaScript
// The following code is available in swiperJS website.
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",
},
});
Generating Download Link...