Resonsive Customizable Testimonials Plugin With jQuery

Resonsive Customizable Testimonials Plugin With jQuery

This is a jQuery plugin that adds responsive, configurable, vertical (or horizontal) Testimonials to your product page.

The Testimonials are a great way to display comments, reviews, feedback from your customers so as to boost your conversions.

The responsive design is based on CSS flexbox.

1. Insert jQuery library together with the Responsive Testimonials plugin's files into the html file.

<link rel="stylesheet" href="/css/responsive-testimonals.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="/js/responsive-testimonals.js"></script>

2. Initialize the Resonsive Testimonials plugin on document ready.

$(document).ready(function () {
  $('.responsive-testimonals').responsiveTestimonals();
});

3. Create horizontal Testimonials with the class of 'responsive-testimonals--layout-row'.

<div class="responsive-testimonals responsive-testimonals--layout-row">
  <div class="responsive-testimonals__list">
    <div class="responsive-testimonals__item responsive-testimonals__item--layout-order-2 responsive-testimonals__item--align-aside-center">
        <div class="responsive-testimonals__aside">
          <div class="responsive-testimonals__img-box responsive-testimonals__rounded-full">
            <img class="responsive-testimonals__img responsive-testimonals__rounded-full" src="responsive-testimonals/img/1.jpg" width="142" height="142" alt="">
          </div>
        </div>
        <div class="responsive-testimonals__content responsive-testimonals__rounded-4">
          <div class="responsive-testimonals__content-body">
            <div class="responsive-testimonals__title">Title 1</div>
            <div class="responsive-testimonals__subtitle">Subtitle 1</div>
            <div class="responsive-testimonals__desc">
              Description 1
            </div>
          </div>
        </div>
    </div>
    <div class="responsive-testimonals__item responsive-testimonals__item--layout-order-1 responsive-testimonals__item--align-aside-center">
      <div class="responsive-testimonals__aside">
        <div class="responsive-testimonals__img-box responsive-testimonals__rounded-full">
          <img class="responsive-testimonals__img responsive-testimonals__rounded-full" src="responsive-testimonals/img/2.jpg" width="142" height="142" alt="">
        </div>
      </div>
      <div class="responsive-testimonals__content responsive-testimonals__rounded-4">
        <div class="responsive-testimonals__content-body">
        <div class="responsive-testimonals__title">Title 2</div>
        <div class="responsive-testimonals__subtitle">Subtitle 2</div>
        <div class="responsive-testimonals__desc">
          Description 2
        </div>
      </div>
      </div>
    </div>
  </div>
</div>

4. Create horizontal Testimonials with the class of 'responsive-testimonals--layout-col'.

<div class="responsive-testimonals responsive-testimonals--layout-col">
  <div class="responsive-testimonals__list">
    <div class="responsive-testimonals__item responsive-testimonals__item--layout-order-1 responsive-testimonals__item--align-aside-center">
      <div class="responsive-testimonals__aside">
        <div class="responsive-testimonals__img-box responsive-testimonals__rounded-full">
          <img class="responsive-testimonals__img responsive-testimonals__rounded-full" src="responsive-testimonals/img/3.jpg" width="142" height="142" alt="">
        </div>
      </div>
      <div class="responsive-testimonals__content responsive-testimonals__rounded-4">
        <div class="responsive-testimonals__content-body">
          <div class="responsive-testimonals__title">Title 1</div>
          <div class="responsive-testimonals__subtitle">Subtitle 1</div>
          <div class="responsive-testimonals__desc">
              Description 1
          </div>
        </div>
      </div>
    </div>
    <div class="responsive-testimonals__item responsive-testimonals__item--layout-order-1 responsive-testimonals__item--align-aside-center">
      <div class="responsive-testimonals__aside">
        <div class="responsive-testimonals__img-box responsive-testimonals__rounded-full">
          <img class="responsive-testimonals__img responsive-testimonals__rounded-full" src="responsive-testimonals/img/4.jpg" width="142" height="142" alt="">
        </div>
      </div>
      <div class="responsive-testimonals__content responsive-testimonals__rounded-4">
        <div class="responsive-testimonals__content-body">
          <div class="responsive-testimonals__title">Title 2</div>
          <div class="responsive-testimonals__subtitle">Subtitle 2</div>
          <div class="responsive-testimonals__desc">
              Description 2
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

5. The resonsive Testimonials are fully customizable via the following CSS classes instead of JavaScript.

  • responsive-testimonals__list--align-h-left: Left-align for horizontal mode
  • responsive-testimonals__list--align-h-center: Center-align for horizontal mode
  • responsive-testimonals__list--align-h-right: Right-align for horizontal mode
  • responsive-testimonals__list--align-v-top: Top-align for vertical mode
  • responsive-testimonals__list--align-v-center: Center-align for vertical mode
  • responsive-testimonals__list--align-v-bottom: Bottom-align for vertical mode
  • responsive-testimonals__list--align-v-stretch: Stretch-align for vertical mode
  • responsive-testimonals__item--layout-order-1: the order of the text and image
  • responsive-testimonals__item--layout-order-2: the order of the text and image
  • responsive-testimonals__item--align-aside-start: the position of the image container element
  • responsive-testimonals__item--align-aside-center: the position of the image container element
  • responsive-testimonals__item--align-aside-end: the position of the image container element
  • responsive-testimonals__content--align-h-left: content alignment for horizontal mode
  • responsive-testimonals__content--align-h-center: content alignment for horizontal mode
  • responsive-testimonals__content--align-h-right: content alignment for horizontal mode
  • responsive-testimonals__content--align-h-justify: content alignment for horizontal mode
  • responsive-testimonals__content--align-v-top: content alignment for vertical mode
  • responsive-testimonals__content--align-v-center: content alignment for vertical mode
  • responsive-testimonals__content--align-v-bottom: content alignment for vertical mode
  • responsive-testimonals__rounded-x: the curves of the elements to be rounded. x can be 0~20 or full

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

  • Publication date: 05.07.2018
  • Source