Review Card Slider using HTML, CSS & JavaScript

Review Card Slider using HTML, CSS & JavaScript

Hello developers, today in this blog, you'll learn to create a Review Card Slider using HTML, CSS & JavaScript.

A Review Card is a part of the website on which reviews can be posted about people, businesses, products, or services. Reviews have the power to influence customer decisions, can strengthen a company's credibility.

In this blog (Review Card Slider), on the webpage, there is a card at the center of the webpage which contains the reviews of the people about the businesses, products or services, etc., In this review card, there is a profile icon of the person, below the profile icon there is a name of the person with his/her destination and the review content of the person. Below these, two arrows are the forward arrow and backward arrow. By clicking the forward arrow, the review card will move to the previous card that was posted by a person. Similarly, for the backward arrow, the review card will move to the next card.

The source code of this Review Card Slider is given below, if you want the source code of this program, you can copy it. You can use this Review Card Slider with your creativity and can take this project to the next level.

Review Card Slider [Source Code]

To make this website (Review Card Slider), you need to create three files: an HTML file, a CSS file, and a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Reviews card || learningrobo</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'><link rel="stylesheet" href="style.css"> </head> <body> <main class="main"> <section class="container"> <div class="title"> <h2>Reviews Card</h2> <div class="underline"></div> </div> <article class="review"> <div class="img-container"> <img src="https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg" alt="" id="person-img" /> </div> <h4 id="author">sara jones</h4> <p id="job">ux designer</p> <p id="info"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores debitis incidunt, eius earum ipsam cupiditate libero? Iste, doloremque nihil? </p> <div class="button-container"> <button class="prev-btn btn"> <i class="fas fa-chevron-left"></i> </button> <button class="next-btn btn"> <i class="fas fa-chevron-right"></i> </button> </div> </article> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </section> </main> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive, create a CSS file with the name style.css, and remember that you have to make a file with a .css extension.


@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
img {
  max-width: 100%;
}

.main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #85FFBD;
  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}

.container {
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  margin: 40px 0px;
}

.title h2 {
  font-size: 50px;
  text-transform: capitalize;
  margin-bottom: 5px;
}

.title .underline {
  width: 100px;
  height: 4px;
  background-color: #177a29;
  margin: 0 auto;
}

.review {
  width: 100%;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
  background-color: #12192c;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: "Open Sans", sans-serif;
  border-radius: 12px;
}

#person-img {
  width: 150px;
  height: 150px;
  background-size: cover;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.5);
}

#author {
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  margin-top: 10px;
  color:#FFFB7D
}

#job {
  text-transform: uppercase;
  line-height: 150%;
  margin-bottom: 10px;
  color: #85FFBD;
}

#info {
  height: 100px;
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  text-align: center;
  margin-bottom: 30px;
}

.btn {
  text-decoration: none;
  border-style: none;
  font-size: 30px;
  margin: 0 10px;
  color: #85FFBD;
  cursor: pointer;
  background-color:#12192c;
}
.credit a{
  text-decoration: none;
  color: #000;
  font-weight: 800;
  }
  
  .credit {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
   
    color:#000;
    text-align: center;
  }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


const reviews = [
  {
    id: 1,
    name: "ram",
    job: "web developer",
    img:
      "https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__340.png",
    text:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis atque neque aut laudantium illo incidunt error aliquam eius minima amet. Ad beatae, culpa obcaecati quam cupiditate similique consequatur! Inventore, et."
  },
  {
    id: 2,
    name: "anees",
    job: "web designer",
    img:
      "https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__340.png",
    text:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis atque neque aut laudantium illo incidunt error aliquam eius minima amet. Ad beatae, culpa obcaecati quam cupiditate similique consequatur! Inventore, et."
  },
  {
    id: 3,
    name: "james",
    job: "intern",
    img:
      "https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__340.png",
    text:
      "SLorem ipsum dolor sit amet consectetur adipisicing elit. Debitis atque neque aut laudantium illo incidunt error aliquam eius minima amet. Ad beatae, culpa obcaecati quam cupiditate similique consequatur! Inventore, et."
  },
  {
    id: 4,
    name: "san",
    job: "the boss",
    img:
      "https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__340.png",
    text:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis atque neque aut laudantium illo incidunt error aliquam eius minima amet. Ad beatae, culpa obcaecati quam cupiditate similique consequatur! Inventore, et."
  }
];

const img = document.getElementById("person-img");
const author = document.getElementById("author");
const job = document.getElementById("job");
const info = document.getElementById("info");

const prevBtn = document.querySelector(".prev-btn");
const nextBtn = document.querySelector(".next-btn");

let currentItem = 0;

// load initial item
window.addEventListener("DOMContentLoaded", () => {
  const item = reviews[currentItem];
  img.src = item.img;
  author.textContent = item.name;
  job.textContent = item.job;
  info.textContent = item.text;
});

// show person based on item
function showPerson(person) {
  const item = reviews[person];
  img.src = item.img;
  author.textContent = item.name;
  job.textContent = item.job;
  info.textContent = item.text;
}

// show next person
nextBtn.addEventListener("click", () => {
  currentItem++;
  if (currentItem > reviews.length - 1) {
    currentItem = 0;
  }
  showPerson(currentItem);
});

// show prev person
prevBtn.addEventListener("click", () => {
  currentItem--;
  if (currentItem < 0) {
    currentItem = reviews.length - 1;
  }
  showPerson(currentItem);
});
We hope you will like this Review Card Slider using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem creating this Review Card Slider using HTML, CSS & JavaScript, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome