Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a testimonial slider. To create this project we need HTML, CSS and Javascript.
This is a beginner-friendly javascript project.
If you are looking for other projects to improve your javascript skills. You can check out this playlist here. This playlist from my youtube channel consists of about 80+ tutorials on javascript projects. The difficulty of these projects varies from simple to quite complex ones.
Video Tutorial:
If you prefer to learn by coding along with a video tutorial rather than reading this blog post, you can watch this tutorial here. I post new tips, tricks and tutorials on my youtube channel regularly. So be sure to subscribe to my channel so you don’t miss any of these tutorials.
Project Folder Structure:
Before we begin the coding, let us create the project folder structure. We create a project folder called – “Testimonial Slide”. Inside this folder, we have three files. These files are index.html – the HTML document, style.css -the stylesheet and, finally, script.js – the script file.
HTML:
We begin with the HTML code. Now copy the code below and paste it into your HTML file.
The HTML code consists of a div with a class name wrapper. Inside the wrapper, we have a div – ‘testimonial-container’. As of now, there is nothing inside this container. We will dynamically generate the content for this div.
Next, we have two buttons – ‘prev’ and ‘next’.
<!DOCTYPE html>
<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>
CSS:
We now style these elements using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
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;
}
}
Javascript:
Finally, we add functionality to the code using Javascript. The javascript code contains an array of objects. Each object is a testimonial.
We set a current index and use javascript to display the data present at that particular index in the testimonials array.
Lastly, we add functionality to the ‘next’ and ‘prev’ buttons by implementing logic to set the index and call the ‘displayTestimonial()’.
//Testimonial Data
const testimonials = [
{
name: "Eva Sawyer",
job: "CEO, Fashworks",
image: "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: "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: "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: "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;
That’s it for this tutorial. If you have any issues while creating this code, you can download the source code by clicking on the download button below. If you have any queries, suggestions, or feedback, you can comment below.
Happy Coding!
