Transforming my Web Development Journey: A Testimonial for JavaScript Mastery

A slider testimonial in JavaScript is a dynamic and interactive element commonly used on websites to showcase a series of testimonials, reviews, or quotes from satisfied customers, clients, or users. It provides a visually appealing way to present these testimonials in a rotating or sliding manner, allowing visitors to the website to easily browse through different testimonials without taking up too much space on the page.

Here's an explanation of how a slider testimonial in JavaScript typically works:

Source Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Customer Review</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <div class="wrapper">
        <div class="card">
          <div class="profile-img">
            <img src="images/1.jpg" alt="Profile" />
          </div>
          <div class="card-body">
            <h4>Full Name</h4>
            <p class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, numquam. Nemo illum, placeat suscipit facilis id fugit magnam itaque omnis perferendis numquam quae animi? Neque autem hic facilis recusandae quod?</p>

            <div class="rating">&#9733; &#9733; &#9733; &#9733; &#9734;</div>
          </div>
        </div>
        <div class="card">
          <div class="profile-img">
            <img src="images/2.jpg" alt="Profile" />
          </div>
          <div class="card-body">
            <h4>Full Name</h4>
            <p class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, numquam. Nemo illum, placeat suscipit facilis id fugit magnam itaque omnis perferendis numquam quae animi? Neque autem hic facilis recusandae quod?</p>

            <div class="rating">&#9733; &#9733; &#9733; &#9733; &#9734;</div>
          </div>
        </div>
        <div class="card">
          <div class="profile-img">
            <img src="images/3.jpg" alt="Profile" />
          </div>
          <div class="card-body">
            <h4>Full Name</h4>
            <p class="review">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non, numquam. Nemo illum, placeat suscipit facilis id fugit magnam itaque omnis perferendis numquam quae animi? Neque autem hic facilis recusandae quod?</p>

            <div class="rating">&#9733; &#9733; &#9733; &#9733; &#9734;</div>
          </div>
        </div>
      </div>

      <div class="indicators">
        <button class="active"></button>
        <button></button>
        <button></button>
      </div>
    </div>
    <script src="js/script.js"></script>
  </body>
</html>

js/script.js

document.addEventListener("DOMContentLoaded", function () {
  const wrapper = document.querySelector(".wrapper");
  const indicators = [...document.querySelectorAll(".indicators button")];
  let currentIndex = 0;
  indicators.forEach((button, index) => {
    button.addEventListener("click", () => {
      indicators[currentIndex].classList.remove("active");
      wrapper.style.marginLeft = `-${100 * index}%`;
      button.classList.add("active");
      currentIndex = index;
    });
  });
});

This JavaScript code is responsible for creating a slider testimonial functionality. It uses the Document Object Model (DOM) and event listeners to create a sliding effect for a series of testimonials when the associated indicator buttons are clicked.

In summary, this code snippet creates a slider testimonial by associating indicator buttons with testimonial items. When an indicator button is clicked, it triggers the slider effect by adjusting the margin-left property of the .wrapper element, effectively sliding the testimonials into view. Additionally, it updates the active indicator button to highlight the currently displayed testimonial. The currentIndex variable keeps track of the currently displayed testimonial's index, allowing for proper navigation and highlighting.

css/style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  width: 100%;
  height: 100vh;
  background-color: #222;
  display: grid;
  place-items: center;
}
.container {
  width: 800px;
  min-width: 350px;
  min-height: 150px;
  padding-bottom: 40px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.wrapper {
  width: 300%;
  min-height: 100%;
  display: flex;
  justify-content: space-between;
  transition: 1s;
}

.card {
  background-color: #fff;
  width: 800px;
  min-height: 100%;
  padding: 10px;
  margin: 0 2px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-img {
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-body {
  min-height: 100%;
  margin-left: 20px;
  padding-bottom: 10px;
}

h4 {
  font-size: 20px;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-color: #333;
  text-transform: uppercase;
  margin-top: 10px;
  color: #b71540;
}

.review {
  font-size: 16px;
  line-height: 25px;
  margin: 10px 0;
  color: #333;
}

.rating {
  font-size: 30px;
}

.indicators {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.indicators button {
  background: none;
  border: none;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 50%;
  transition: 0.5s;
}

.indicators button.active {
  width: 40px;
  border-radius: 50px;
  background-color: #fff;
}

@media (max-width: 800px) {
  .container {
    width: 50%;
    margin: auto;
  }
  .card {
    flex-direction: column;
    padding: 10px;
  }

  .profile-img {
    width: 100%;
  }
  .card-body {
    width: 100%;
    min-height: auto;
  }
}

Output

Live Preview

By incorporating a slider testimonial into a website, you enhance the user experience by providing engaging and visually appealing content that highlights the positive experiences of your customers or clients. It's a great way to build trust and credibility with your audience. There are also various JavaScript libraries and plugins available that simplify the process of creating and customizing slider testimonials, making it even easier to implement on your website.