Hello friend! I hope your project is progressing well, and I look forward to meeting and making memories with you soon! This weblog post will teach you to create a responsive Testimonial Slider using HTML/CSS and SwiperJs/JavaScript/SwiperJS. I have also made numerous sliding cards using HTML/CSS or combining both techniques!
Testimonials are reviews of products and offerings. For instance, testimonials on a coffee shop website may include reviews where various customers leave opinions about said coffee shop’s coffee.
Please glance at our project [Testimonial Slider]; you can easily spot an image and review the text of an individual on a product or service at the bottom. There is also a quote icon and their name/process at the right and left sides, with three-dot buttons showing that it can be slideable when we click either right or left on the nav button to move right or left, and another person’s quote will be revealed; you may even grab and slide mouse right or left to change between content material slideshow modes!
Let’s watch a demo of this testimonial and all the HTML, CSS, and JavaScript code used to build this mission [Testimonial Slider].
As promised, I have enclosed all the HTML, CSS and JavaScript code used to build this Testimonial Slider. However, before going further into its code file, allow me to describe its academic context briefly.
As seen within the video tutorial of [Testimonial Slider], there is a wase containing several testimonial textual content, including its name and jot of character. At the bottom of that testimonial content, there were three dots, and on both the right and left sides, there were navigation buttons; when I clicked the right side button, it slid right-side until proper-side content appeared, whereas grabbing and shifting my mouse right or left would cause it to slide left or right respectively.
We realized our testimonial had become completely responsive; when I reduced its width, it perfectly fit onto the display screen. Once our testimonial width reached tablet screen sizes, its nav button disappeared since we could slide it with our fingers.
Now, I hope you can post this testimonial using HTML, CSS, JavaScript, and SwiperJs. If you encounter difficulty creating it yourself, please use my source code below as a starting point.
Testimonial Slider [Source Code]
To generate HTML, CSS, and JavaScript code for a Testimonial Slider, three files must be developed: an HTML report, a CSS document, and a JavaScript report. Having done so, copy/paste any given codes directly into your document—alternatively, download them all using the provided download button.
<!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>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>
    <div>
      <div>
        <div>
          <img src=”#” alt=”” />
          <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></i>
          <div>
            <span>Marnie Lotter</span>
            <span>Web Developer</span>
          </div>
        </div>
        <div>
          <img src=”#” alt=”” />
          <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></i>
          <div>
            <span>Marnie Lotter</span>
            <span>Web Developer</span>
          </div>
        </div>
        <div>
          <img src=”#” alt=”” />
          <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></i>
          <div>
            <span>Marnie Lotter</span>
            <span>Web Developer</span>
          </div>
        </div>
      </div>
      <div></div>
      <div></div>
      <div></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;
}
}
JS:
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 experience issues while developing your Testimonial Slider or have code that isn’t running as expected, you can download its source code documents free of cost by clicking on the download button and view a live demo by pressing the view live button.
