Responsive Customizable Testimonials Plugin With jQuery

File Size: 78.6 KB
Views Total: 3118
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive 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 testimonials, teams, portfolios, quotes, reviews, or any text with imagesfrom your customers so as to boost your conversions.

The responsive design is based on CSS flexbox.

See Also:

How to use it:

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

<link rel="stylesheet" href="/path/to/css/responsive-testimonials.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/responsive-testimonials.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. Customize the plugin with the following CSS classes:

  • responsive-testimonials__item--layout-order-x: Set the order of the content.
  • responsive-testimonials__item--align-aside-x: Set the position of the image, x = "start", "end", or "center"
  • responsive-testimonials__content--align-h-x: Set the alignment of the content, x = "left", "right", "justify", or "center"
  • responsive-testimonials__content--align-v-x: Set the alignment of the content, x = "top", "bottom", or "center"
  • responsive-testimonials__rounded-x: Set the border-radius of the content, x = 1-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.