Responsive Rotating Testimonial Box using bxSlider jQuery Plugin





In all most every business website we can see a column allocated to display customer testimonials. In this post, I am going to explain how to create one such testimonial box that is responsive and slides testimonials one after the other using bxSlider, the responsive jQuery Content Slider Plugin. This is very simple to create and most importantly adapts to any kind of device, be it a desktop, phone or tablet.


1. First of all download all the required files,
2. Copy and paste the below code in a text file and save it as an html file. Do not forget to edit the location of the referenced css and js files to the location where you have downloaded these.
<html>
<head>
<title>Rotating Testimonials with bxSlider</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.bxslider.min.js" type="text/javascript"></script>
<link href="jquery.bxslider.css" rel="stylesheet" type="text/css" />
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
blockquote
{
    clear: both;
    font-style: italic;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 10px 0 50px;
    position: relative;
    quotes: none;
    background: url(https://dl.dropbox.com/u/96099766/RotatingTestimonial/open-quote.png) 0 0 no-repeat;
    border: 0px;
    font-size: 120%;
    line-height: 200%;
}
</style>
<script type="text/javascript">
         $(document).ready(function () {           
             $('.bxslider').bxSlider({
                 mode: 'vertical',
                 slideMargin: 3,
                 auto:true
             });             
         });
    </script>
</head>
<body>
 <!--Testimonials Start-->
 <div style="width:50%;margin-left:20px;">
  <h3 style="font-style:oblique">What are customers are saying..</h3>
  <hr/>
  <ul class="bxslider">
   <li>
    <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus. Fusce condimentum eleifend enim a feugiat. Pellentesque viverra vehicula sem ut volutpat. Integer sed arcu massa.
    <p style="text-align:right;margin-right:20px;">- David</p> 
    </blockquote>
    </li>
  <li><blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus. Fusce condimentum eleifend enim a feugiat. Pellentesque viverra vehicula sem ut volutpat. Integer sed arcu massa.
  <p style="text-align:right;margin-right:20px;">- Srinivas</p>
  </blockquote>
  </li>
  <li><blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus. Fusce condimentum eleifend enim a feugiat. Pellentesque viverra vehicula sem ut volutpat. Integer sed arcu massa.
  <p style="text-align:right;margin-right:20px;">- Anita</p>
  </blockquote></li>
  </ul>
 </div>
 <!--Testimonials End-->
</body>
</html>

That is it! Now open the html file in a browser to see the output as shown below. 





In the above example, the testimonials slide vertically. There are other options like horizontal sliding and fade mode. Check out the examples you have here to add more to this simple testimonial box. 


 Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading this!!


Subscribe to GET LATEST ARTICLES!


Related

Responsive Design 1394424402631358551

Post a Comment

  1. Great Plugin! Can you tell me where I change the speed that a slide appears for before it transitions to the next one?

    ReplyDelete
    Replies
    1. Hi Amy,

      Please use 'speed' option to control the slide transition duration. The value should be mentioned in milliseconds. Default is 500 ms.

      Example:
      $('.bxslider').bxSlider({
      mode: 'vertical',
      slideMargin: 3,
      auto:true,
      speed:400
      });

      Delete
    2. Thanks Priya,

      This seems to just increase the speed at which the new slide transitions in, but I actually need to increase the time a slide is visible for before moving to the next one. How can I do this?

      Delete
    3. Oops! Amy, Please try using 'pause' option. Sorry I misunderstood your question.

      Example:
      $('.bxslider').bxSlider({
      mode: 'vertical',
      slideMargin: 3,
      auto:true,
      pause:400
      });

      Delete
  2. is there a fix to have this work with bootrap .js?

    ReplyDelete
    Replies
    1. Hi Joe,

      You can try Bootstrap Vertical Slider instead, check this out,

      http://bootply.com/63147#

      Delete
  3. Awesome tutorial!!
    Thank you very much Priya!

    ReplyDelete
  4. nice plugin & explanation,
    I have query?
    given example slider can display only one list, at a time but i want to display three lists at time (i mean 3 li tags). where modifications required?

    ReplyDelete
  5. Thanks for the writeup, two fixes:
    1) "What *our* customers are saying..."
    2) You don't need bootstrap for this

    ReplyDelete
    Replies
    1. Fixed! Thank you for the pointers.

      Thanks,
      Priya

      Delete
  6. Great Plugin..But when added to the site, the testimonial doesn't loads and when reloaded many times the plugin starts to work.. Is there any way to solve this ?

    ReplyDelete
  7. Hi, Great Plugin! But I want to set invisible left/right arrows... Please tell me how to do?

    ReplyDelete
  8. I tried this slider by pulling data from a database by using the same html codes but slider dosent work,insted it displays the list of data that i pulled any idea how to fix this. thankyou

    ReplyDelete
  9. I tried this but by clicking on next/prev buttons it shows the data.But after stopped the clicking it doesn't auto scroll.how to fix this

    ReplyDelete

emo-but-icon

SUBSCRIBE


item