Responsive Testimonial Carousel In JavaScript

A stylish, responsive, mobile-friendly carousel slider component to display your product testimonials, team members, service feedbacks in an elegant way.

How it works:

1. Create selectors for the slider container, each slide, the next button and the previous button
2. Clone the first slide and append it at the end of the slides container
3. Clone the last slide and append it at the beginning of the slides container
4. Create a ‘counter’ variable and set it equal to 1
5. Add event listeners to the next and previous buttons. If next button is clicked, add 1 to counter. If prev button is clicked, subtract 1 from counter
6. Move to the next / previous slide by using transform: translateX to shift the slides horizontally by each slide’s width and margin multiplied by the number of slides tracked in counter
7. If the “last clone” is reached, reset counter to 0
8. If the “first clone” is reached, reset counter to 1

See Also:

• 10 Best Free Testimonial WordPress Plugins

How to use it:

1. Add quotes, names, roles, and images to the testimonial carousel.

<section class="section-testimonials">
  <div class="slider">
    <!-- Slides -->
    <div class="slider__slides">
      <div class="slider__slide slider__slide--1">
        <figure class="testimonial slider__slide-content">
          <blockquote class="testimonial__text">
            <img class="testimonial__quotation-marks" src="images/pattern-quotes.svg" alt="quotation marks">
            <p class="testimonial__quote">
              “ I’ve been interested in coding for a while but never taken the jump, until now.
              I couldn’t recommend this course enough. I’m now in the job of my dreams and so
              excited about the future. ”
            </p>
            <cite class="testimonial__cite">
              <span class="testimonial__cite--name">Tanya Sinclair </span>
              <span class="testimonial__cite--role">UX Engineer</span>
            </cite>
          </blockquote>
          <div class="testimonial__img">
            <img class="testimonial__photo" src="images/image-tanya.jpg" alt="Tanya Sinclair">
          </div>
        </figure>
      </div>
      <div class="slider__slide slider__slide--2">
        <figure class="testimonial slider__slide-content">
          <blockquote class="testimonial__text">
            <img class="testimonial__quotation-marks" src="images/pattern-quotes.svg" alt="quotation marks">
            <p class="testimonial__quote">
              “ If you want to lay the best foundation possible I’d recommend taking this course.
              The depth the instructors go into is incredible. I now feel so confident about
              starting up as a professional developer. ”
            </p>
            <cite class="testimonial__cite">
              <span class="testimonial__cite--name">John Tarkpor </span>
              <span class="testimonial__cite--role">Junior Front-end Developer</span>
            </cite>
          </blockquote>
          <div class="testimonial__img">
            <img class="testimonial__photo" src="images/image-john.jpg" alt="John Tarkpor">
          </div>
        </figure>
      </div>
    </div>
    <!-- Controls -->
    <div class="slider__buttons">
      <div class="slider__button slider__button--prev">
        <svg class="slider__button-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="18">
          <path fill="none" stroke-width="3" d="M11 1L3 9l8 8" /></svg>
      </div>
      <div class="slider__button slider__button--next">
        <svg class="slider__button-icon" xmlns="http://www.w3.org/2000/svg" width="13" height="18">
          <path fill="none" stroke-width="3" d="M2 1l8 8-8 8" /></svg>
      </div>
    </div>
  </div>
</section>

2. Add the main stylesheet and slider.js to the webpage. Done.

<link rel="stylesheet" href="css/style.css" />
<script src="js/slider.js"></script>