Tab Style Testimonial Slider With jQuery

This is a testimonial slider written in jQuery and CSS, which showcases author images, each of them containing a quote and the testimonial text. And users can switch between testimonials just like in a tabs UI.

This can be used on personal websites to showcase user's testimonials which in turn can help increase conversions for businesses.

How to use it:

1. Add author images and testimonial text to the tesimonal slider.

<div class="testimonial-section">
  <h1>Testimonial Title</h1>
  <!-- Images -->
  <div class="testimonial-pic">
      <img class="active" src="images/face-01.jpg" data-alt="tab1">
      <img src="images/face-02.jpg" data-alt="tab2">
      <img src="images/face-03.jpg" data-alt="tab3">
      <img src="images/face-04.jpg" data-alt="tab4">
  </div>
  <!-- Testimonial Text -->
  <div class="testimonial">
    <div class="content active" id="tab1">
      <p>Testimonial 1</p>
      <p>Sally, Web Desginer</p>
    </div>
    <div class="content" id="tab2">
      <p>Testimonial 2</p>
      <p>Amy, Graphic Designer</p>
    </div>
    <div class="content" id="tab3">
      <p>Testimonial 3</p>
      <p>Jung Ho, Developer</p>
    </div>
    <div class="content" id="tab4">
      <p>Testimonial 4</p>
      <p>Chris, Printing Desinger</p>
    </div>
  </div>
</div>

2. The necessary CSS styles.

.testimonial-section {
  width: 800px;
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.testimonial-section h1 {
  font-size: 25px;
  margin-bottom: 30px;
}

.testimonial-pic img {
  width: 100px;
  filter: grayscale(1);
  margin: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.testimonial-pic img.active {
  filter: grayscale(0);
  border-radius: 50%;
}

.testimonial .content {
  display: none;
}

.testimonial .content.active {
  display: block;
}

.testimonial .content p:nth-child(2) {
  font-weight: bold;
}

3. Load the latest jQuery JavaScript library right before the closing body tag.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. Switch between testimonials by clicking on testimonial pictures.

$('.testimonial-pic img').click(function () {

  $(this).addClass('active')
  $(this).siblings().removeClass('active')

  $('.testimonial .content').removeClass('active')
  $('#' + $(this).attr('data-alt')).addClass('active')
  
})

---

This awesome jQuery plugin is developed by Amber-Kim. For more Advanced Usages, please check the demo page or visit the official website.