01
2011jQuery Testimonials Slider with Navigation and Effects using Cycle Plugin – Multiple Sliders on Same Page
Tags: Cycle Plugin | javascript | jQuery
Sometime back I put together a Text Testimonials Slider with Navigation using jQuery and Cycle Plugin. I got several requests of how to put several testimonials boxes on single web page. I have updated the original code and have provided different testimonials boxes with different effects. I have also added navigation styles to make the buttons look nicer.
Here’s the demo ofTestimonials Slider using jQuery library and Cycle Plugin with Multiple boxes on same page:
You can view jQuery Cycle Testimonial Slider Demo with Multiple Instances on one page in new window.
Let’s start adding the code on your web page in three easy steps.
Step 1
Add jQuery library and Cycle plugin that’s required for this slider. Add folowing code in the head section of yuor web page.
<!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> <script type="text/javascript"> $(document).ready(function() { $('#testimonials1') .before('<div id="nav">') .cycle({ fx: 'fade', // choose your transition type, ex: fade, scrollUp, scrollRight, shuffle pager: '#nav' }); $('#testimonials2') .after('<div id="nav2">') .cycle({ fx: 'scrollRight', // choose your transition type, ex: fade, scrollUp, scrollRight, shuffle pager: '#nav2' }); }); </script>
Step 2
Add these styles to your .css file or just add in the web page using style tag:
*{margin:0;padding:0;} body{ font-family:Tahoma, Arial, sans-serif; padding:20px; } /* testimonials: */ #testimonials1, #testimonials2 { width:330px; background:#E7E9E6; border:1px solid #D8D9D6; margin:10px 0; } #testimonials1 blockquote, #testimonials2 blockquote{ padding:10px; width:300px !important; font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; color:#808080; display:block; } #testimonials1 blockquote p, #testimonials2 blockquote p{ margin: 0 !important;padding: 5px!important; } #testimonials1 blockquote cite, #testimonials2 blockquote cite { font-style: normal; display: block; text-transform: uppercase; font-weight: bold; font-style:italic; color: #555; padding-left:5px; margin-top:10px; } .nav { margin: 5px 0 } #nav a, #s7 strong { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none } #nav a.activeSlide { background: #ea0 } #nav a:focus { outline: none; }
Step 3
Lastly, add this html code to your webpage where you want to show the testimonials:
<h2>Testimonials With Fade Effect</h2>
<div id="testimonials1">
<blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
<cite>–Martin - NY</cite></p></blockquote>
<blockquote><p>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<cite>–Sandra - LA</cite></p></blockquote>
<blockquote><p>"Duis aute irure dolor in reprehenderit in voluptate nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<cite>–Jason - MA</cite></p></blockquote>
</div><!--end .testimonials1-->
<br />
<h2>Testimonials with ScrollRight Effect</h2>
<div id="testimonials2">
<blockquote><p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "
<cite>–Martin - NY</cite></p></blockquote>
<blockquote><p>"Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<cite>–Sandra - LA</cite></p></blockquote>
<blockquote><p>"Duis aute irure dolor in reprehenderit in voluptate nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<cite>–Jason - MA</cite></p></blockquote>
</div><!--end .testimonials2-->You may need to change the width and other css styles of the testimonials boxes as per your requirements.
Hope that helps.
Cheers!
Related posts:
- Text Slider for Testimonials with Navigation – JavaScript Widget using jQuery Cycle Plugin
- Add and Style Custom Navigation Menus in WordPress Using wp_nav_menu
- Adding rel Attribute to All Links for jQuery Mobile App Page Using jQuery
- Resolve Tabindex Issue for Multiple Gravity Forms in WordPress using jQuery
- Adding Custom Menus in your Theme for WordPress 3.x
Kari Mitchell
Hi thanks so much for this. It’s great! One quick question – how would one slow down the rotation – ? I managed to lose the navigation on the #1 example and make it wider for my specifications – but it’s rotating at a specific speed and I need to slow it down a bit. – ? thanks so much for any help.
Ali Qureshi
Add following timeout in the above script inside .cycle:
Pradeep
This helped me a lot.
Q? How can I stop testimonial on focus I mean on mouse hover?
Ali Qureshi
Following code will pause and resume on mouseover and mouseout events respectively:
$('#testimonials1').mouseover(function() { $('#testimonials1').cycle('pause'); }); $('#testimonials1').mouseout(function() { $('#testimonials1').cycle('resume'); });