How to make Testimonial Slider in HTML CSS & JavaScript | SwiperJS

0

How to make Testimonial Slider in HTML CSS & JavaScript | SwiperJS

Hello friend, I hope you are doing and creating an excellent project. Today in this blog, you will learn to make a responsive Testimonial Slider in HTML CSS and JavaScript/SwiperJs. There are lots of Sliding Card that I have created using HTML and CSS only and HTML CSS and JavaScript with swiperjs.

Testimonials are the section that contains reviews of the products and services. As we can see on the coffee shop website there will be a review, where many reviews of the different person’s kept about that coffee.

Have a quick look at the given image of our project [Testimonial Slider], as you can see on the given image there is an image of a person and the review text of that person on the product or services, the bottom of the image there is a quote icon and person’s name and job. Technically there are two buttons on the right and left sides, and three-dot, which indicates that it is slideable. Actually when we click on the nav button that will slide right or left and another person’s quote will appear. We can slide those content by grabbing and sliding the mouse right or left.

Let’s watch the real demo of this testimonial and all the HTML  CSS and JavaScript code that I have used to create this project [Testimonial Slider].

Testimonial Slider in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Testimonial Slider. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial of [Testimonial Slider], at first there was an image of some review text and the name and jot of the person. Bottom of that testimonial content there are three dots and on the right and left side, there is two nav button. When I clicked on the right button, then that content slid left side and right-sided content appeared, similarly when I clicked on the left side button, the content slid right side and left-sided content appeared. Also, I slid that content just by grabbing the content and moving the mouse right or left.

We saw that our testimonial was fully responsive, when I decreased the width of the testimonial it fitted according to the screen. When our testimonial width came as our normal tablet screen sizes, then its nav button disappear because we can slide it by finger too.

I hope now you can create this testimonial using HTML CSS and JavaScript with SwiperJs. If you are feeling difficulty creating this testimonial, you can take the source code that I have given below.

You Might Like This:

Testimonial Slider [Source Code]

To get the following HTML CSS and JavaScript code for the Testimonial Slider, you need to create three files one is an HTML file and another is a CSS file and a JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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>Responsive Testimonial Slider</title>

    <!-- Swiper CSS -->
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />

    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css" />

    <!-- Boxicons CSS -->
    <link
      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <section class="container">
      <div class="testimonial mySwiper">
        <div class="testi-content swiper-wrapper">
          <div class="slide swiper-slide">
            <img src="#" alt="" class="image" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
              saepe provident dolorem a quaerat quo error facere nihil deleniti
              eligendi ipsum adipisci, fugit, architecto amet asperiores
              doloremque deserunt eum nemo.
            </p>

            <i class="bx bxs-quote-alt-left quote-icon"></i>

            <div class="details">
              <span class="name">Marnie Lotter</span>
              <span class="job">Web Developer</span>
            </div>
          </div>
          <div class="slide swiper-slide">
            <img src="#" alt="" class="image" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
              saepe provident dolorem a quaerat quo error facere nihil deleniti
              eligendi ipsum adipisci, fugit, architecto amet asperiores
              doloremque deserunt eum nemo.
            </p>

            <i class="bx bxs-quote-alt-left quote-icon"></i>

            <div class="details">
              <span class="name">Marnie Lotter</span>
              <span class="job">Web Developer</span>
            </div>
          </div>
          <div class="slide swiper-slide">
            <img src="#" alt="" class="image" />
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam,
              saepe provident dolorem a quaerat quo error facere nihil deleniti
              eligendi ipsum adipisci, fugit, architecto amet asperiores
              doloremque deserunt eum nemo.
            </p>

            <i class="bx bxs-quote-alt-left quote-icon"></i>

            <div class="details">
              <span class="name">Marnie Lotter</span>
              <span class="job">Web Developer</span>
            </div>
          </div>
        </div>
        <div class="swiper-button-next nav-btn"></div>
        <div class="swiper-button-prev nav-btn"></div>
        <div class="swiper-pagination"></div>
      </div>
    </section>

    <!-- Swiper JS -->
    <script src="js/swiper-bundle.min.js"></script>
    <!-- JavaScript -->
    <script src="js/script.js"></script>
  </body>
</html>
/* Google Fonts - Poppins */
@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;
}
.container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3f2fd;
}
.testimonial {
  position: relative;
  max-width: 900px;
  width: 100%;
  padding: 50px 0;
  overflow: hidden;
}
.testimonial .image {
  height: 170px;
  width: 170px;
  object-fit: cover;
  border-radius: 50%;
}
.testimonial .slide {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 30px;
  height: 100%;
  width: 100%;
}
.slide p {
  text-align: center;
  padding: 0 160px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
}
.slide .quote-icon {
  font-size: 30px;
  color: #4070f4;
}
.slide .details {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.details .name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.details .job {
  font-size: 12px;
  font-weight: 400;
  color: #333;
}
/* swiper button css */
.nav-btn {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  transform: translateY(30px);
  background-color: rgba(0, 0, 0, 0.1);
  transition: 0.2s;
}
.nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.nav-btn::after,
.nav-btn::before {
  font-size: 20px;
  color: #fff;
}
.swiper-pagination-bullet {
  background-color: rgba(0, 0, 0, 0.8);
}
.swiper-pagination-bullet-active {
  background-color: #4070f4;
}
@media screen and (max-width: 768px) {
  .slide p {
    padding: 0 20px;
  }
  .nav-btn {
    display: none;
  }
}
 var swiper = new Swiper(".mySwiper", {
  slidesPerView: 1,
  grabCursor: true,
  loop: true,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

If you face any difficulties while creating your Testimonial Slider or your code is not working as expected, you can download the source code files for this Review Slider for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

View Live Demo

 

Previous articleBuild A Custom Video Player in HTML CSS & JavaScript
Next articleHow to Validate Email in HTML CSS & JavaScript | Email Checker

LEAVE A REPLY

Please enter your comment!
Please enter your name here