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.

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.

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.

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

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">&lt;</button>
      <button id="next">&gt;</button>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

Testimonial Slider CSS Code:-

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.

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;
  }
}

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;

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.

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

Blog

Create Testimonial Slider using HTML, CSS, and JavaScript

Codewithrandom Blogs

Testimonial Slider Html Code:-

Testimonial Slider CSS Code:-

Testimonial Slider JavaScript Code:-

Join Our Newsletter. No Spam, Only the good stuff.

Related