Testimonial Slider: HTML, CSS, JavaScript

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.

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">&lt;</button>
      <button id="next">&gt;</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 copy the source code . If you have any queries, suggestions, or feedback, you can comment below.
Happy Coding!

Testimonial Slider Using HTML CSS Javascript

Day 60 of 60 :Responsive Testimonial Slider using only HTML & CSS

Project Folder Structure:

HTML:

CSS:

Javascript: