Create Testimonial Slider using HTML, CSS, and JavaScript
Hello Coders! Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make Testimonial Slider which will generate a testimonial or we can say feedback in which they share their experience and their views to continue their journey with the brand or company.
A testimonial slider is a card section inside the webpage. This particular section of our websites is designed for user feedback and satisfaction, where our main customers give feedback about our company, which helps other consumers trust the services and products of the company.We will be using basic HTML, CSS,CSS and JavaScript for creating the testimonial slider.
In this article, we create Testimonial Slider using HTML, CSS, and JavaScript.This project will be good for beginners and help them to build their front-end development skills.
50+ HTML, CSS & JavaScript Projects With Source Code
Preview of the Testimonial Slider:-
How to Create Testimonial Slider using HTML, CSS, and JavaScript
- Step 1 – The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make this Project.
- Step 2 – Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in this Project.
- Step 3 – At last we will use JS (JavaScript) which will add a logic to make the Testimonial Slider Project responsive from the user end.
I hope you have got an idea about the project.
| Project Name | Testimonial Slider |
| Code By | @harshh9 |
| Project Idea | codingartist |
| Written by | Harsh Sawant |
| Project Download | Copy Code From Given Code Snippets and Codepen embed |
| Language Used | HTML, CSS, And JavaScript |
| External Link / Dependencies | No |
| Responsive | Yes |
Portfolio Website using HTML and CSS (Source Code)
Testimonial Slider Html Code:-
First we’ll start with creating the structure of the Testimonial Slider project for that as you can see the above code we have used all the necessary elements & attributes to setup the structure. Let us know code the CSS part to add styling and aligned the tags.
In the HTML code we have custom google font (poppins) in <head> tag. We have a main div, which class name is wrapper, we have a child div which class name is Testimonial-Container, we give a ID name to this div is Testimonial-Container also. Basicaly all the testimonial or feedback content will show in this container.
In this project we have two buttons, which ID names are Prev & Next. Button which ID name is Prev to see previous content and button which ID name is Next to see Next content when user take click action on these buttons.
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Testimonial Slider</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="testimonial-container" id="testimonial-container"></div>
<button id="prev"><</button>
<button id="next">></button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
ADVERTISEMENT
ADVERTISEMENT
Testimonial Slider Css Code:-
ADVERTISEMENT
Second comes the CSS code in which we have styled for the structure we have padded as well as aligned the Testimonial Slider project so that it is properly situated and doesn’t get messy with suitable CSS elements. Now lets code the JavaScript part to make responsive.
ADVERTISEMENT
Restaurant Website Using HTML and CSS
ADVERTISEMENT
Copy all the CSS code given below, and paste these in your style.css file.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #0a69ed;
}
.wrapper {
background-color: #ffffff;
position: absolute;
width: 80vw;
max-width: 41em;
min-height: 25em;
border-radius: 0.6em;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
box-shadow: 0 1.8em 3em rgba(1, 17, 39, 0.15);
display: flex;
}
.testimonial-container {
width: 85%;
height: 100%;
position: relative;
margin: auto;
padding: 1.8em 1.2em;
}
.wrapper button {
font-size: 1.8em;
height: 2.2em;
width: 2.2em;
background-color: #ffffff;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
border: none;
color: #0a69ed;
box-shadow: 0 0 1em rgba(1, 17, 39, 0.25);
cursor: pointer;
border-radius: 50%;
}
button#next {
right: -1.1em;
}
button#prev {
left: -1.1em;
}
.testimonial-container p {
color: #8c8c90;
text-align: center;
font-size: 0.9em;
line-height: 2em;
letter-spacing: 0.05em;
}
.testimonial-container img {
display: block;
margin: 1.8em auto 1.25em auto;
border-radius: 50%;
width: 4.4em;
}
.testimonial-container h3 {
color: #2d3d67;
font-size: 1em;
text-align: center;
}
.testimonial-container h6 {
color: #bcc4da;
font-size: 0.9em;
letter-spacing: 0.03em;
font-weight: 400;
text-align: center;
}
@media screen and (max-width: 650px) {
.wrapper {
font-size: 14px;
}
}
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Testimonial Slider JavaScript Code:-
Last stage of the project the JavaScript in which we have added the logical and coded as per the requirement with some conditions. Let us see the Final Output of the project Testimonial Slider using HTML, CSS, and JavaScript (Source Code).
In the JavaScript code, we have a testimonials Array, where all the testimonial or feedback data are we have. From this array, we will show all the data in testimonial-container by using Array object method.
Also we have created onclick function for buttons to sliding this testimonials next and Previous. Alright, now you just have a look to JavaScript code given below and copy all these code then paste it in your JavaScript file, which you have linked in HTML.
//Testimonial Data
const testimonials = [
{
name: "Eva Sawyer",
job: "CEO, Fashworks",
image: "https://i.postimg.cc/mgp4pfz5/profile-image-1.png",
testimonial:
"Neque volutpat ac tincidunt vitae semper quis lectus nulla at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum consectetur",
},
{
name: "Katey Topaz",
job: "Developer, TechCrew",
image: "https://i.postimg.cc/PfSSwtB9/profile-image-2.png",
testimonial:
"Elementum tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse in est ante in nibh mauris cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui accumsan sit amet nulla",
},
{
name: "Jae Robin",
job: "UI Designer, Affinity Agency",
image: "https://i.postimg.cc/W4mnbjG9/profile-image-3.png",
testimonial:
"Orci nulla pellentesque dignissim enim sit amet venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque massa placerat duis ultricies lacus sed turpis",
},
{
name: "Nicola Blakely",
job: "CEO,Zeal Wheels",
image: "https://i.postimg.cc/xdLsJL23/profile-image-4.png",
testimonial:
"Sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit",
},
];
//Current Slide
let i = 0;
//Total Slides
let j = testimonials.length;
let testimonialContainer = document.getElementById("testimonial-container");
let nextBtn = document.getElementById("next");
let prevBtn = document.getElementById("prev");
nextBtn.addEventListener("click", () => {
i = (j + i + 1) % j;
displayTestimonial();
});
prevBtn.addEventListener("click", () => {
i = (j + i - 1) % j;
displayTestimonial();
});
let displayTestimonial = () => {
testimonialContainer.innerHTML = `
<p>${testimonials[i].testimonial}</p>
<img src=${testimonials[i].image}>
<h3>${testimonials[i].name}</h3>
<h6>${testimonials[i].job}</h6>
`;
};
window.onload = displayTestimonial;
How To Create OTP Input Field Using HTML , CSS & Javascript
Final Output Of Testimonial Slider:-
We have successfully created our Testimonial Slider using HTML, CSS and JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.
Final Output of Testimonial Slider Using HTML , CSS and Javascript
If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Code Idea – codingartist
Written By – Harsh Sawant
Code By – @harshh9
FAQ for Testimonial Slider Using HTML ,CSS and Javascript
How to make Testimonial Slider using HTML, CSS, and JavaScript
Step 1 – The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make this Project.
Step 2 – Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in this Project.
Step 3 –
At last we will use JS (JavaScript) which will add a logic to make the Testimonial Slider Project responsive from the user end.
What is the use of Testimonial Slider Using HTML,CSS and Javascript
A testimonial slider is used for creating separate sections inside webpages that allow customers and buyers to share their feedback about companies services and products.
Which code editor do you use for creating Testimonial Slider using HTML, CSS and Javascript?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
