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.
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:
Testimonials With Fade Effect
"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. " –Martin - NY
"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." –Sandra - LA
"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." –Jason - MA
Testimonials with ScrollRight Effect
"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. " –Martin - NY
"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." –Sandra - LA
"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." –Jason - MA
You may need to change the width and other css styles of the testimonials boxes as per your requirements.
Hope that helps.
Cheers!
Hi, thanks for this excellent snippet. I had to bend it a little just to work it besides other effects, but now it works as a charm.
Anyway, Is there any way of how to slow down the duration of the transition effect too? Thanks!
yes, speed can be managed.. cycle plugin has that snippet on its website.. I think I already mentioned in the comments long time back..
Same problem for me, I tried on xampp to and with Firefox, Chrome browser. Problem is that all 3 sample testimonials are stacked on top of one another. I add everything, copy the code to top in the head, then add css + html code into body.
Thanks for help
check the testimonials demo here https://www.parorrey.com/wp-content/uploads/2011/11/multiple-testimonials-with-effects-demo.html and if they work in this page, they should work anywhere.
Yea, but now it’s only working with Firefox and not with Chrome, mybe these needs to be in domain ?
Tried everything, not working :S… Copy style to head, seperate style to style. css add code in body and jquery and … inside .
Can you send me please documents ? I tried like 40x times.
I’m not sure what;s wrong in your code but try the page I have shown you. I have already sent you in email.
I checked and it worked in all Chrome, IE, Safari, and Firefox. Please check the example I have there. is it not working for you?
thanks for the knowledge
I want to ask you
how to remove 1 2 3?
Try this, this will replace numbers with a circle:
$(document).ready(function() { $('#testimonials') .before('')
.cycle({
fx: 'fade',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '•';
}
});
});
sorry, i copied the code from the demo now and it works. must have been doing something wrong. thanks! looks awesome.
looks great! however, i can’t get it to work.
dreamweaver says there’s a syntax error in the java script:
pager: ‘#nav’
}); (DW says there’s an error on this line)
$(‘#testimonials2’)
Looks great but has cause me to move on to look for something else. Will check back here soon. thanks
Hi,
How do you change and customize the nav (123) numbers to like navigation images I made to replace the numbers? So visitors can navigate through the testimonial slider by clicking my navigation images. Also how do you change the autoplay to false so it doesn’t play by itself.. only when someone clicks on the navigation?
Thank you 🙂
please see the comments, I have mentioned the code there.
Hi, any suggestion for Testimonial slider along with a photo ?
just add the image using sstandard![]()
in the content and that should do.
Q: in the testimonial with fade effect , there are numbering 123 . i want to replace these numbers with icon. can you help me ?
If you want to customize the navigation and want to replace numbers with some symbol, this will replace numbers with a circle:
$(document).ready(function() { $('#testimonials') .before('')
.cycle({
fx: 'fade',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '•';
}
});
});
first of all Ali Qureshi ,thanks for the quick reply. actually i want to change its numbering’s css according to my own requirement . i want to change with some icon and have different mouse hover effect. but i am not able to change its css. its somewhere fixed. kindly help me?
you can add any css styles and html code in this line in above code.
It’s really great. thanks
I tried to install this on my Blogger Blog, But i am having an error installing the jquery Plug-in. The tag is not closed. I think i need to do some fix but i am not that knowledgeable re that matters.
Just what I’ve been looking for – Thanks Ali.
Any way of playing once through the array and then stop ?
Installed as suggested, and used separate css file.
but I cannot get the slider(s) to work. They display on the website as 3 up (all 3 sample testimonials are stacked on top of one another.
What did I do wrong?
Most probably, you did not include the jQuery file. Please see the demo in new window and view its source.
This helped me a lot.
Q? How can I stop testimonial on focus I mean on mouse hover?
Following code will pause and resume on mouseover and mouseout events respectively:
$('#testimonials1').mouseover(function() { $('#testimonials1').cycle('pause'); }); $('#testimonials1').mouseout(function() { $('#testimonials1').cycle('resume'); });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.
Add following timeout in the above script inside .cycle:
.cycle({ fx: 'fade', timeout: 1000 });