Testimonial Slider using HTML,CSS and Javascript

July 07, 2022

Testimonial Slider using HTML,CSS and Javascript

Testimonial Slider using HTML,CSS and Javascript

In this tutorial, we will learn how to create testimonial slider using HTML,CSS and Javascript.

So, in order to design these, we need 3 files - HTML,CSS and JS files, we do not have worry about the other files.

It is a very simple project, you can use it on your website and make them attractive and rich.

So, Let's begin by making index.html File

The HTML code file consists of a div with class name of a wrapper. Inside that we have a div-'testimonial-container'.

Next, we have two buttons - 'prev' and 'next'

This was our HTML file, now we need to create CSS file to style our element.

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #000000;
}
.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;
  }
}

Finally, we add some functionality to our code works.It contains an array of objects.Each object is a testimonial.

We set current index and use the javascript to display data present at particular index in the testimonial array.

Lastly, we add the prev and next button by implementing some logic and call the 'displayTestimonial()'

app.js

//Testimonial Data
const testimonials = [
  {
    name: "Kabir Mehta",
    job: "CEO, TeamWork",
    image: "pm.png",
    testimonial:
      "Nice Work with the amazing team member with supportive staff",
  },
  {
    name: "Tunny tasker",
    job: "Developer, ITSolutions",
    image: "pf.png",
    testimonial:
      "Supportive members with the amazing hospitality ",
  },
  {
    name: "John yasela",
    job: "UI Designer,Kites",
    image: "pm.png",
    testimonial:
      "Very userful designs and such a amazing pictures",
  },
  {
    name: "Nicola Blakely",
    job: "CEO, S&B Solutions",
    image: "pf.png",
    testimonial:
      "As a CEO, i am always looking forward to the innovations and you are one of them",
  },
];

//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();
});

MISSION COMPLTED

If you have doubts or any queries regarding about the code, comment me, I will ping you as soon as possible

THANK YOU FOR READING AND HAPPY CODING💜

https://workstationit.blogspot.com/2022/07/random-quote-generator-small-javascript.html

Search This Blog

TheHouseOfIT

Testimonial Slider using HTML,CSS and Javascript

Comments

Post a Comment

Popular Posts

Data Cleaning in Python with steps - Part 2

Activation Functions in Neural Networks