Create a Testimonial Slider Using HTML, CSS, & JavaScript

Create a Testimonial Slider Using HTML, CSS, & JavaScript

 


Most websites use testimonials on their home page for better user attraction. When we buy any services or products first we check reviews, that’s why we should use that on our website. if you have to create your websites from scratch this tutorial will helpful for you.

In this tutorial, you’ll learn How To CreateTestimonial Slider Using HTML CSS JavaScript. We’ll use HTML CSS & JS to create this awesome Testimonial Slider.

Digital Testimonial Slider  in JavaScript [Source Codes]

To create this program [Testimonial Slider ]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>testimonial javascript</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
<body>
     <div class="container">
       <div class="testimonial-card">
         <div class="testimonial-details">
           <div class="testimonial-logo">
            <i class="fas fa-quote-right"></i>
           </div>
           <p id="desc">
             Lorem ipsum dolor sit, amet
             consectetur adipisicing elit.
             Nobis, harum, neque unde ipsum
             accusamus tempora maxime animi
             veniam eius, rerum eaque suscipit.
             Tenetur dolores saepe libero
             officia at eveniet esse.
           </p>
           <div class="info">
             <h3 class="title" id="author">
               John Doe
             </h3>
             <h4 id="job">
               UX developer
             </h4>
           </div>
         </div>
         <div class="buttons">
           <div class="prev-btn">
            <i class="fas fa-chevron-left"></i>
           </div>
           <div class="next-btn">
            <i class="fas fa-chevron-right"></i>
           </div>
         </div>
         <div class="testimonial-img">
           <img src="img/test-2.jpg" alt="" id="person-img">
         </div>
       </div>
     </div>
    <script src="main.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap');

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: #fefefe;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: 620px;
  background: #fff;
  border-radius: 10px;
  filter: drop-shadow(0 0 10px
          rgba(0, 0, 0, 0.5));
  overflow: hidden;        
}

.testimonial-details {
  position: relative;
  width: 100%;
  height: 380px;
  padding: 30px;
}

.testimonial-card .testimonial-logo {
  position: absolute;
  font-size: 20rem;
  color: #000;
  opacity: 0.1;
  z-index: -1;
}

.testimonial-details p {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 300;
  line-height: 30px;
  text-transform: uppercase;
}

.info {
  display: flex;
}

.testimonial-details .title {
  margin-right: 10px;
  font-size: 15px;
  font-weight: 500;
}

.testimonial-details h4 {
  color: #5f9ea0;
}

.testimonial-card .buttons {
  position: relative;
  display: flex;
  width: 80px;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  margin-left: 25px;
  margin-bottom: 10px;
  background: #5f9ea0;
  color: #fff;
  padding: 10px;
  border-radius: 50px;
  z-index: 1;
}

.testimonial-card .buttons .prev-btn,
.testimonial-card .buttons .next-btn {
  cursor: pointer;
  transition: .3s;
}

.testimonial-card .buttons .prev-btn:hover,
.testimonial-card .buttons .next-btn:hover {
  transform: scale(1.25);
}

img {
  width: 120px;
  border-radius: 50%;
}

.testimonial-img {
  position: absolute;
  width: 40%;
  margin-left: 80px;
  background-image: url('img/shape.svg');
  padding: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

@media screen and (min-width: 992px) {
  .container {
    width: 100%;
    max-width: 900px;
    height: 500px;
  }

  .testimonial-card {
    height: 450px;
    display: flex;
    align-items: center;
  }

  .testimonial-img {
    position: relative;
    margin-left: 0;
    margin-right: 20px;
  }

  img {
    width: 300px;
    margin-top: 50px;
  }

  .testimonial-card .buttons {
    position: absolute;
    left: 17px;
    bottom: 50px;
  }

  .testimonial-details {
    padding-top: 90px;
    padding-left: 50px;
  }

  .testimonial-card .testimonial-logo {
    position: absolute;
    left: 100px;
    bottom: 0px;
  }
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

const reviews = [
    {
      id: 1,
      name: "john smith",
      job: "Web Developer",
      img:
        "img/test-1.jpg",
      text:
        "Sed ut perspiciatis unde omnis iste natus error
sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo.",
    },
    {
      id: 2,
      name: "Anna johnson",
      job: "UI Web Designer",
      img:
        "img/test-2.jpg",
      text:
        "At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque corrupti quos
dolores et quas molestias excepturi sint occaecati cupiditate non provident.",
    },
    {
      id: 3,
      name: "Peter jones",
      job: "Front-End Developer",
      img:
        "img/test-3.jpg",
      text:
        "On the other hand, we denounce with righteous
indignation and dislike men who are so beguiled and
demoralized by the charms of pleasure of the moment,
so blinded by desire, that they cannot foresee the pain and
trouble that are bound to ensue.",
    },
  ];

const img = document.getElementById('person-img');
const author = document.getElementById('author');
const job = document.getElementById('job');
const desc = document.getElementById('desc');

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

let currentItem = 0;

window.addEventListener("DOMContentLoaded", function() {
  const item = reviews[currentItem];
  img.src = item.img;
  author.textContent = item.name;
  job.textContent = item.job;
  desc.textContent =item.text;
});

function showPerson(person) {
  const item = reviews[person];
  img.src = item.img;
  author.textContent = item.name;
  job.textContent = item.job;
  desc.textContent =item.text;
};

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

prevBtn.addEventListener("click", function() {
  currentItem--;
  if (currentItem < 0) {
    currentItem = reviews.length -1;
  }
  showPerson(currentItem);
});

Download Source Code: Testimonial Slider Using JavaScript

That’s all, now you’ve successfully Build a Testimonial Slider Using JavaScript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Here are a few helpful posts you might want to read, too:

Why learning code? 7 Essential Benefits From Learning Programming

6 Things To Know Before Learning Programming

How to Teach Yourself to Learn Code

If you enjoyed this post about the Testimonial Slider Using JavaScript just drop me a line in the comments below!

P.S. If you found this post helpful, please share it with others! Thanks for your support!