Resonsive Customizable Testimonials Plugin With jQuery

Resonsive Customizable Testimonials Plugin With jQuery
File Size: 79 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.

How to use it:

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.