The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. jQuery-Cycle plugin can be used to create a simple text slider to show testimonials on web page. There are many options that you can use to control how and when your slide transitions occur. You can also add the navigation links to go through your testimonials.
Here’s the demo of Testimonials Slider using jQuery library and Cycle Plugin:
You can view jQuery Cycle Testimonial Slider Demo in a new window here.
Let’s start adding the code on your web page in three easy steps.
First of all, add jQuery library and Cycle plugin that’s required for this slider. Add following code in the head section of yuor web page.
As a second step, add these styles to your .css file or just add in the web page using style tag:
#testimonials {
width:330px;
background:#E7E9E6 url(images/bg-testimonials.png) left top repeat-x;
border:1px solid #D8D9D6;
margin:10px 0;
}
#testimonials blockquote{
padding:10px;
width:300px !important;
font-family:Georgia, "Times New Roman", Times, serif;
font-style:italic;
color:#808080;
display:block;
}
#testimonials blockquote p{
margin: 0 !important;padding: 5px!important;
}
#testimonials blockquote cite {
font-style: normal;
display: block;
text-transform: uppercase;
font-weight: bold;
font-style:italic;
color: #555;
padding-left:5px;
margin-top:10px;
}
In the last step, add this html code to your webpage where you want to show the testimonials:
Testimonials
“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 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.” –Jason – MA
You may need to change the width of the testimonials box as per your requirements. You can also define the styles for the navigation links using the #nav in your css file.
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('
Hope that helps.
Cheers!
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
Hi, I’m french and I use a translator to write to you! I added your script on my page, but this appears to me that the text, I do not understand why?
I already other css links in the head tag your content. ca for that is what it does not work? I put what’s on my head tag.
thanks for your help
——————————————————–
Bonjour Moi,
Check this page here, https://www.parorrey.com/wp-content/uploads/2011/10/testimonials-demo.html .. just view source and you will see all that you need to do.
Je veux apprendre le français un jour.. 🙂
merci.
this does not work for me, even the demo you created does not seem to work anymore, is this abandoned?
Hi John,
The linked js library was no more available on google server. I have updated in the code as well. it is now working again.
Cheers!
trying to get this to work with weebly – it works just fine in the site preview on the page when pasted into an embed code (html) box but once the site is published it just lists all the different block quotes below one another.
$(document).ready(function() {
$(‘#testimonials’)
.cycle({
fx: ‘scrollUp’, // choose your transition type, ex: fade, scrollUp, scrollRight, shuffle
});
});
Hi, I’ve been using this script and it was running fluently. I can see it’s not working now…any clue.
The github link if jquery.cycle.all.latest.js stopped working.
replace that with https://filemasbayu.googlecode.com/files/jquery.cycle.all.latest.js
Thanks so much Mr. Ali, it’s working flawlessly.. 🙂
Thanks!!!
One other thing…
I have noticed that when loading a new page (not yet cached by the browser) if scrolling down very quickly to where the testimonials are positioned (before the page has fully loaded), occasionally all the testimonials will be displayed for a fraction of a second.
When the page loads completed (when the script kicks in), then the testimonials snap back into place, only displaying one at a time as intended.
Do you have any solution for this?
You can do this by hiding the testimonial div initially using a class with display:none;.
Add this class to css file.
.hidden{ display:none; }This line will make the div visiable again when the dom is ready.
$(document).ready(function() { $('#testimonials').show(); });Fantastic little script!
I know you answered this above but is there really no way to have the testimonials display randomly through JavaScript (not PHP)?
Also, what does the code actually look for to identify each testimonial? I changed the surrounding blockquote tag to a div and the script still worked (I actually half expected that it wouldn’t). From this, I would guess that it looks for the next child element below div#testimonials, is this correct?
Yes, script uses the cycle plugin to roratate and animate the nested elements inside #testimonials div.
You can delete my post. You already had the information in here. I just read over it too quickly.
Hi. Love the slider. Really useful and simple. Having issues with the background on IE 8, IE 9, the background shows up as white. I noticed other users had the issue, but apparently resolved it by setting the backgroun-color to transparent. This did not work for me. Any ideas?
Hello Ali.
How would I write the php to display quotes randomly from a mysql database?
Thanks for your time!
Included the proper page url with the slider displayed on it. Thanks!
It works for my IE8 too.
This slider is truly fantastic. I am having a problem with IE8 only. Instead of scrolling the testimonials it just lists them down the page in a series. Works in IE7 and every other browser I have tested. Any ideas on how I can address this?
Just found the solution:
#testimonials blockquote { background-color: transparent !important; }
Cheers, Harry
Hi
Great Script! I am having trouble with IE7 though in that I can’t remove the background solid white colour – works fine in FF. I already have a transparent png for the div it sits in, and it seems to display extra white for some reason. I;ve removed the background-color bit from the stylesheet, but to no avail.
Cheers, Harry
I uploaded everything to my site, I thought correctly. Problem is the text is stationary and not transitioning. I’m using Weebly, could that be the issue?
You have included the jQuery twice in your head section. You are also using prototype library. jQuery and prototype have issues when used simultaneously but there are work around for this. First try by removing the jQuery double inclusion.
I started html,css, and js last week. I’m teaching myself. Could you spell it out for me by telling me what line to delete. I tried a few things but it didn’t work. I really appreciate your help.
remove this line
I removed the line of code, published and refreshed. No change…what do you think I should try next?
Side note: On the other j.query plug-in I installed [the image slider]. I had to input the following into the header section under Settings of the Weebly control panel:
jQuery(window).load(function() {
jQuery(‘#slider’).nivoSlider({
effect: ‘random’,
pauseTime: 6000
});
});
Do you think I need to throw part of your code in here?
Ok thanks mate , lovely slider 🙂 well done
where should I add the following codes:
$(document).ready(function() {
$(‘#testimonials’)
.before(”)
.cycle({
fx: ‘fade’,
pager: ‘#nav’,
pagerAnchorBuilder: function(idx, slide) {
return ‘•‘;
}
});
});
Anywhere on your page inside script tag.
Hi Ali,
I am trying to add the jQuery library to my head section but it does shut up my main slider on the home page, why is that ?
website is paternitycentre .co.uk
Thanks
Henry
jQuery must be already added in your theme. You cant add two instances of jQuery in your template. so leave the jQuery part and do the rest.
Thanks for your prompt response, yes I have done without the jQuery part but have a look it is not functioning well ……
remove this “// choose your transition type, ex: fade, scrollUp, scrollRight, shuffle” and also change the #nav name. rename it to nav2 or soemthing.
I have four sliders on one page, one below the other.
I want them to slide one second apart, but when I use timeout: 1000, timeout: 1100 timeout: 1200 …etc for each slider the slides work fine for ten rotations, but after that they start catching up to each other and go our of sinc. Is there a way to have them rotate in sinc one second apart? If I had them start a second after each other rather then setting timeout would that work, if so how can I set each slider to start rotating at a specified time?
1 second is equal to 1000. You should set values to with a difference of 1000 such as 2000, 3000, 4000, 5000.
Hi, thx for great script, it is a gret help.
Just want to ask, how can I edit the navigation, so it show only “” for navigation, just next or previous.
Thanks again and good luck in your next jobs:)
Try this, this will replace numbers with a circle:
$(document).ready(function() { $('#testimonials') .before('')
.cycle({
fx: 'fade',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '•';
}
});
});
Hey!! I have implemented the slider on my site successfully but every time i refresh my page the block quotes dont appear on top of each other. how do i fix this?
By the way, nice tutorial
Thanks,
I did not get your problem. Can you please explain more?
nevermind, sorry, it does work in IE like you said. i was trying to tweak it and remove the blockquote & P tags.
helps to set the blockquote div to margin: 0px; …
Yes, It works in all IE versions.
Exactly what I was looking for… and super easy to install and use! My next challenge will be to integrate this into WordPress.
Thank you Ali for taking the time to put this tutorial together!
Really nice script! Works perfect, I only have one question considering the CSS. How can we place the navigation buttons and the div in the center of the page?
Assuming your navigation div id #nav, following css code should do:
#nav{ margin: 0px auto; }nice and easy install, everything worked perfectly, wonderful, painless, simple, thanks a great deal, you rock
I have a doubt. It might be a stupid one.
“How do you make it work in Drupal? I tried drupal_add_js, still its not working”.
Please help.
Looks very nice. How can we make it to stop if “mouseover” ? 🙂
Following code will pause and resume on mouseover and mouseout events respectively:
$('#testimonials').mouseover(function() { $('#testimonials').cycle('pause'); }); $('#testimonials').mouseout(function() { $('#testimonials').cycle('resume'); });Just add these lines in the above example after $(document).ready(function() {.
Hi, I’m not good with this stuff at all. How do I download the library and cycle plugins?
You don;t have to download these two libraries. just include in your web page like this:
That’s what I did but the slider looks like this on my page:
http://www.savannalikeswords.com/
Your WordPress theme has included jQuery already. You just need to include the following code:
Any help, anyone?
Please see this page https://www.parorrey.com/wp-content/uploads/2011/10/testimonials-demo.html and view its source code. That;s all you need to put in your page.
Okay, I literally copied and pasted everything on that page and it still didn’t work. I’m wondering if it’s something with my theme…
Your theme already has jQuery file included. Don’t include it again and try with that.
Yes, I did that and it still didn’t work. I’ve noticed that tags don’t seem to function correctly whenever I use them on my site. I’m thinking it must be something with my theme. Checking with my web developer.
Great tutorial. Going to change the css up a little but this was just what i was looking for. Hopefully this works in IE, cant check since im on mac right now. But in case it doesnt work in IE, is there a quick fix?
Thanks for the slider again!
Don’t worry, it works in IE, even in IE6.
GREAT, I am putting my own css spin on it now. Thanks again
hi, could you please tell me I need to do to fit automatically at the height of the testimonial
It automatically does that already. There’s no need to define height for anything.
Amazing script. is there any possibility to hide the navigation?
Just remove pager and nav, use it like this:
$(document).ready(function() { $('#testimonials') .cycle({ fx: 'fade', // choose your transition type, ex: fade, scrollUp, scrollRight, shuffle }); });Ali, I did this but when i viewed my slider it doesnt work, it doesnt do the fade effect. Any Advice? http://theyellowbulb.blogspot.com
Thanks!
Don’t include jQuery in your template. WordPress already has it included.
Remove this line
Also remove this “// choose your transition type, ex: fade, scrollUp, scrollRight, shuffle” from the script.
Ali, Thank you for your prompt respond. I tried this on my other Blogspot blog account and it works, But to my primary Blog it doesnt.. I think my Template is constipated. LOL, Thanks again for this.
Most probably, there’s some script conflict. You should check the browser console (CTRL + ALT J using Chrome) for any javascript errors.
thanks, works great,
how can i set the background transparent. ?
ex.
#testimonials blockquote
{
background-color:transparent;
……..
…………
}
but this dont work in IE
You can simply remove background-color style. 🙂
What would be the best way to manipulate the content of the navigation (i.e instead of 1, 2, 3, one two three) Also, is it possible for the slider to pause on mouse-over?
Try this, this will replace numbers with a circle:
$(document).ready(function() { $('#testimonials') .before('')
.cycle({
fx: 'fade',
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '•';
}
});
});
How do you make it display quotes randomly?
To show them randomly, it would be best and easiest to do in PHP. Place all the testimonials in the php array and then shuffle the array elements and then list them like this:
–Martin - NY', '"2. 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', '"3. 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." –Jason - MA' ); $testimonials_arr = shuffle($testimonials_arr); foreach($testimonials_arr as $k) $testimonials .= ''; ?>
Testimonials
Hi Ali
I added to http://www.kidforever.com/ but the slider is going too fast. I added the timeout and what it does is to make the slider not work.
Let me know
Set the speed like this:
.cycle({ fx: 'fade', speed: 800, pager: '#nav' });I would like to add about 50 testimonials, and dont need the navigation. Is it possible? If so, how?
Thanks
You can add as many testimonials as you want, just remove .before(‘
to remove navigation.
Thanks! Looked forever for something like this. Couple questions: how do I set the navigation either above or below the text, and how do I separate the css underlines for 1-2-3, etc. ?
Thanks again.
check this post for Multiple Testimonials Sliders on single page for navigation styles. This page also has example of before and after navigation.
BTW, following code adds the nav:
.before('');
.after('');
Brilliant thanks!! What do I need to do to be able to use this multiple times on the same page?
Hi Lee,
You can check this post for Multiple Testimonials Sliders on one page.
Thanks Ali, thats perfect. Such a simple and light solution.
One question, how can I control the time duration that each testimonial is displayed for.
Just add the timeout like this:
.cycle({ fx: 'fade', // choose your transition type, ex: fade, scrollUp, scrollRight, shuffle pager: '#navigation', timeout: 1000 });1000 means 1 second.
Awesome, thank you so much for this… was looking for this all over !
hey,
i m web developer
thanks a lot for this fabulous script
its very simple easy