Responsive Rotating Testimonial Box using bxSlider jQuery Plugin

DEMO DOWNLOAD In all most every business website we can see a column allocated to display customer testimonials. In this post, ...

26
Bootstrap, Responsive Design
A+ A-
Print Email
https://www.programming-free.com/2013/01/responsive-rotating-testimonial-box.html


DEMO DOWNLOAD


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!


Posted by

Related

Responsive Design 1394424402631358551
Newer Post Older Post Home item

Post a Comment

  1. Unknown24 March 2013 at 04:02

    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. Unknown24 March 2013 at 15:32

      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. Unknown24 March 2013 at 21:07

      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. Unknown24 March 2013 at 23:48

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

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

      Delete
    4. Unknown24 March 2013 at 23:57

      Perfect! thankyou!!

      Delete
    5. Unknown25 March 2013 at 00:00

      Most Welcome!

      Thanks,
      Priya

      Delete
  2. Unknown6 July 2013 at 09:25

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

    ReplyDelete
    Replies
    1. Unknown8 July 2013 at 05:49

      Hi Joe,

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

      http://bootply.com/63147#

      Delete
  3. Rosangela Kelwattes10 September 2013 at 17:14

    Awesome tutorial!!
    Thank you very much Priya!

    ReplyDelete
  4. Unknown12 September 2013 at 01:44

    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. Unknown2 May 2014 at 21:12

    Most Welcome!

    ReplyDelete
  6. Unknown15 July 2014 at 18:20

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

    ReplyDelete
    Replies
    1. Unknown16 July 2014 at 02:49

      Fixed! Thank you for the pointers.

      Thanks,
      Priya

      Delete
  7. Unknown17 September 2014 at 21:38

    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
  8. Nidhi2 March 2015 at 01:19

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

    ReplyDelete
  9. Anonymous6 March 2015 at 05:41

    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
  10. Unknown4 December 2015 at 05:35

    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
  11. Unknown11 April 2017 at 05:55

    Allow me to show you the jQuery-RandPosPlugin. It’s a small jQuery Plugin which can be used to design amazing animated and modern-looking testamonials, galleries and much more. The plugin is free and and example can be found here: http://www.manuelmaurer.at/randposplugin.php

    ReplyDelete
  12. Unknown14 July 2017 at 00:38

    i am looking for vertical testimonials u have an idea about that

    ReplyDelete
  13. Unknown14 September 2017 at 00:33

    thank you

    ReplyDelete
  14. Unknown9 January 2018 at 00:56

    how i can download this testimonial slider

    ReplyDelete
  15. Unknown13 December 2018 at 02:59

    Foto Ayam Sabung

    ReplyDelete
  16. Alia parker7 June 2022 at 22:09

    I'm appreciative to this blog website giving exceptional as well as helpful comprehension concerning this subject. heat pump auckland

    ReplyDelete
  17. Nancy3 October 2022 at 10:08

    Stretch wrap, Kraft paper, packaging tapes, and bubble wrap are further items that are utilized for packaging. Making a strong first impression on clients requires the correct type of packaging that offers adequate protection to the contents within. Nylon film supplier/manufacturer

    ReplyDelete

emo-but-icon

SUBSCRIBE


Tabs

item