How to build a testimonial slideshow using HTML, CSS, and JavaScript
Testimonials can be a powerful marketing tool for your business or website, as they provide social proof and help build trust with potential customers. One effective way to showcase your testimonials is with a slideshow. In this tutorial, we’ll walk through how to build a testimonial slideshow using HTML, CSS, and JavaScript.
Step 1: Set up the HTML
First, we need to set up the basic HTML structure for our testimonial slideshow. We’ll start with a simple container element that will hold our testimonials, and add an id attribute to the elements that we'll be manipulating with JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Testimonial Slideshow</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="testimonial-container">
<h1 id="testimonial"></h1>
<p id="author"></p>
<button id="prev-btn">Prev</button>
<button id="next-btn">Next</button>
</div>
<script src="script.js"></script>
</body>
</html>Step 2: Add some style with CSS
Next, we’ll add some CSS to make our testimonial container more colorful and visually appealing. We’ll also add some styles for the buttons to give them a modern look.
.testimonial-container {
background-color: #333;
color: #fff;
text-align: center;
padding: 3rem;
}
#testimonial {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
}
#author {
font-size: 1.5rem;
font-style: italic;
}
#prev-btn, #next-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 10px;
}
#prev-btn:hover, #next-btn:hover {
background-color: #3e8e41;
}Step 3: Write the JavaScript
Finally, we’ll write the JavaScript code that will handle the logic for our testimonial slideshow. We’ll start by defining an array of testimonials, each with a text and an author. We'll also define a variable to keep track of the current testimonial being displayed.
const testimonials = [ { text: "I couldn't be happier with the results!", author: "John Doe" }, { text: "Amazing service! Highly recommended.", author: "Jane Smith" }, { text: "The best decision I've ever made!", author: "Bob Johnson" }];
let currentTestimonial = 0;Next, we’ll define four variables that will reference the elements we’ll be updating with JavaScript: the testimonial text, the author text, and the previous and next buttons.
const testimonialElem = document.getElementById("testimonial");
const authorElem = document.getElementById("author");
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");We’ll also define three functions: showTestimonial, prevTestimonial, and nextTestimonial. The showTestimonial function will update the testimonialElem and authorElem elements with the current testimonial's text and author, respectively. The prevTestimonial and nextTestimonial functions will update the currentTestimonial variable and call the showTestimonial function with the new current testimonial.
function showTestimonial() {
testimonialElem.innerText = testimonials[currentTestimonial].text;
authorElem.innerText = testimonials[currentTestimonial].author;
}
function prevTestimonial() {
currentTestimonial = (currentTestimonial === 0) ? testimonials.length - 1 : currentTestimonial - 1;
showTestimonial();
}
function nextTestimonial() {
currentTestimonial = (currentTestimonial === testimonials.length - 1) ? 0 : currentTestimonial + 1;
showTestimonial();
}Finally, we’ll add event listeners to the previous and next buttons that will call the prevTestimonial and nextTestimonial functions, respectively.
prevBtn.addEventListener("click", prevTestimonial);
nextBtn.addEventListener("click", nextTestimonial);Conclusion
In this tutorial, we’ve covered how to build a testimonial slideshow using HTML, CSS, and JavaScript. We started by setting up the HTML structure and adding some basic styles with CSS, and then we wrote the JavaScript code that handles the logic for the slideshow. With a few tweaks to the CSS styles, you can easily customize this slideshow to fit the design of your website or business.
You can view the live output here or you can clone the code from the GitHub repo.
Utibe Udoma is a multi-functional Front-End developer with a passion for everything tech and a love for football. Since 2020, he has been building engaging and responsive user interfaces using React, JavaScript, and HTML and CSS. When he’s not coding, Utibe writes tech-related articles, creates graphics designs, and is an expert in EasyWorship. He is always looking for new ways to expand his skill set. Utibe is committed to delivering high-quality work and ensuring a seamless user experience. In his free time, you can find him catching up on the latest tech news or the football field. You can follow him on Twitter or Linkedin.
