Creating a Slide Responsive Testimonial Widget

If you have a blog or in a blog online store selling services, and the like, may be one widget that needs to be stored in the blog is a widget testimonial .

Surely testimonial here is a comment from the customers or users of our service satisfaction in shopping or using our services. So with that will add more confidence in prospective customers to shop at our blog.

For that I now share a testimonial that is responsive widget by using jquery slider so it can display testimonials, one by one slide which is accompanied by a photo clients or customers.

Author: Adhy Suriady
For the demo you can see in the animated gif below or please try her directly responsive to the url demo JSFiddle underneath with sliding column.

Testimonials slider widget is derived from:
Source code:  http://www.webdesigntunes.com/coding/testimonials-slider-with-jquery/
Then I was a little CSS mods his style in order to become responsive slider. Well for those who want to try it, please use the code below.

Code CSS

.testimonials-box{margin:0 auto;color:#FFF}
.bx-wrapper .testimonials-thumbnail{ margin: 0px 0px 15px; }
.bx-wrapper .testimonials-title{ text-align: center;  margin: 25px 15px 3px; font-size: 24px; line-height: 1; }
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 35%; float: left; margin-right: 10px; }
.bx-wrapper .testimonials-carousel-thumbnail img{ display: block;   margin-right: 10px;width: 100px;}
.bx-wrapper .testimonials-carousel-context{ overflow: hidden; }
.bx-wrapper .testimonials-name{ font-size: 18px; margin-bottom: 10px;margin-top:-3px; font-weight:400;width:95%}
.bx-wrapper span{ font-size: 11px; margin-left:10px; color:#aaa; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic; }
.bx-wrapper {position: relative;margin: 0 auto;padding: 0;width:94%;}
.bx-wrapper .slide {padding:0;margin:0;display: block;}
.bx-wrapper .bx-viewport {padding:10px;margin-left:0;z-index:1;width:100%;}
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto {position: absolute;display:none;bottom: -30px;width: 100%;}
.bx-wrapper .bx-loading {min-height: 50px;background: url(http://webdesigntunes.com/tutorial/testimonials/images/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}
.bx-wrapper .bx-next,.bx-wrapper .bx-prev {display:none}
.bx-wrapper .testimonials-carousel-content p{width:96%;margin:0; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic;}
@media screen and (max-width:400px){
.bx-wrapper {width:85%;}
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 100%; margin:0 15px 10px 0;float:none }
.bx-wrapper .testimonials-carousel-thumbnail img{ width: 100%;height:auto}
}

If stored on a bright background, please change the color:#FFF in code .testimonials-box{margin:0 auto;color:#FFF}

Javascript code

Please save the javascript code below the above code </body>

<script src="http://yourjavascript.com/13912425571/jquery-bxslider-min.js"></script>
<script>
//<![CDATA[
$('.testimonials-slider').bxSlider({
       slideWidth: 800,
       minSlides: 1,
       maxSlides: 1,
       slideMargin: 32,
       auto: true,
       autoControls: true
     });
//]]>
</script>

Then you have installed Pastika jquery library in your blog template. I suggest using latest jquery like below

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

HTML code

<div class="testimonials-box">
<div class="testimonials-slider">
      <div class="slide">
          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="URL IMAGE DI SINI"/></div>
                <div class="testimonials-carousel-context">
                <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>
                <div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>
            </div>
      </div>
     
      <div class="slide">
          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="URL IMAGE DI SINI"/></div>
                <div class="testimonials-carousel-context">
                <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>
                <div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>
            </div>
      </div>
     
      <div class="slide">
          <div class="testimonials-carousel-thumbnail"><img width="120" alt="" src="URL IMAGE DI SINI"/></div>
                <div class="testimonials-carousel-context">
                <div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>
                <div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>
            </div>
      </div>
  </div>  
</div>