One of the most requested improvements over the tutorials presented on this site, when it comes to slideshows, is the ability to have the slides advance automatically. It is actually not that difficult to achieve this effect, and to demonstrate it, in this short tutorial we are going to make our HTML5 Slideshow auto advance with a few lines of jQuery.
The Idea
As our slideshow already has a previous / next arrows, we can just have a JavaScript function execute periodically and “click” the next arrow for us. With jQuery we can easily simulate any event on any element with the help of the trigger() method like so:
$('#nextArrow').bind('click',function(){
alert("Clicked!");
});
$('#nextArrow').trigger('click');
// or alternatively:
// $('#nextArrow').click();
The snippet above will fire all the handlers for the click event and output the alert message. In the case with the slideshow, we don’t care what happens behind the scenes nor how the animation works, we just simulate a click with the mouse. This means that we could as well have the auto advancing script as an external, separate file.
Combined with the setTimeout() JavaScript function we have all the tools necessary to make our slideshow transition automatically between the slides.
The Implementation
Bearing the above in mind, here is the complete auto advance code.
autoadvance.js
$(window).load(function(){
// The window.load event guarantees that
// all the images are loaded before the
// auto-advance begins.
var timeOut = null;
$('#slideshow .arrow').click(function(e,simulated){
// The simulated parameter is set by the
// trigger method.
if(!simulated){
// A real click occured. Cancel the
// auto advance animation.
clearTimeout(timeOut);
}
});
// A self executing named function expression:
(function autoAdvance(){
// Simulating a click on the next arrow.
$('#slideshow .next').trigger('click',[true]);
// Schedulling a time out in 5 seconds.
timeOut = setTimeout(autoAdvance,5000);
})();
});
Notice that we are passing an array parameter to the trigger method on line 28. The element of this array is available to us as the simulated parameter on line 9. This helps us distinguish fake clicks from real ones. If a real one does occur, we stop the auto-advancement by clearing the timeout.
To Wrap Up
To use this script you just need to replace the selectors for the next arrow on line 28 and for both arrows on line 9. With these modifications you will be able to use this snippet to automate any slideshow (or any kind of presentation really) on your site by just including autoadvance.js with a script tag.
21 Comments
Hi Martin,
In the first line of the “Idea”-code you wrote $(‘#ntextArrow’).bind(‘click’,function(){… shouldn’t it be $(‘#nextArrow’).bind(‘click’,function(){ (to correspond with line 5?
~Linus
Thank you for catching that! Yes, it should be $(‘#nextArrow’), and not $(‘#ntextArrow’). It is now fixed.
Hey nice tut! Thanks!
Would be great if you can show us how to integrate this with WordPress. Also as a suggestion, how about starting a WordPress plugins section! :)
proper useful as always (:
keep it up!
Too Good!
Hoi Martin,
Many thanks for your e-mail. And again, great work on this tutorial. This is exactly what I was looking for, and I finally understand what I was doing wrong trying to achieve this effect.
Keep it up!
Chris
Clean and neat as always. Thanks
But one small question. If a real click does occur, what to do in order not to stop the auto-advancement, but keep ‘timeOut’ time the next slide does appear?
Thanks.
I personally find it annoying when I click and show a slide, only for it to auto advance in a few seconds.
If you need to, you can keep the auto-advance running at all times by removing the code from lines 9 to 21 in autoadvance.js.
Nice article man! The slider looks really good!
Hey Martin,
Congrats on an absolutely fantastic site! I’m in the process of redesigning our website and the auto advancing slideshow is exactly what I need. However when I download the demo and attempt to run it offline it doesn’t work. I know it’s got to be something exceptionally dumb but I’m stuck. I’m not a html guy but a 3d artist so a bit different.
Many thanks Nick
Unfortunately browsers enforce security restrictions when it comes to manipulating images with JavaScript (like in this case). Scripts cannot access images on the local machine. You can, however, upload it to your server, and it should work fine.
This is exactly what I needed! Thanks so much!
Hi,
I’m still quite green to jQuery.
Could you explain this please?
“To use this script you just need to replace the selectors for the next arrow on line 28 and for both arrows on line 9. With these modifications you will be able to use this snippet to automate any slideshow (or any kind of presentation really) on your site by just including autoadvance.js with a script tag.”
Thankyou!
thanks you very much. I earlier use flash fir these effects. Now jquery has make it so simple and it is seo friendly as well. thanks for sharing such nice tutorials
Would it be difficult for you to add (maybe I missed it) something that would allow the show to pause on hover?
Regardless, this is a fabulous tut.
Thanks for the great work.
thanx 4 ur tutorial.. it helped me in making my college assignment
This is great. Only question I have is how to adjust the length of time the slides pause before they transition. It is not obvious to me in the js. Thank you.
Hey great work, very clean!
Can you have a version without the image blending mode manipulation? It is unnecessary.
Or declare which lines can be deleted. I tried but it seems to be all dependent.
Thanks.
This slideshow doesn’t work at all when installed on my pages. Whenever I click the next arrow I get an error message saying "$ is not a function" for the line var slides = $(‘#slideshow li’)
I got it working a couple hours ago. I just had to change the first line of code from:
$(window).load(function(){
to:
jQuery(document).ready(function ($) {
I do have one minor issue though. I’m using the slider for user generated content which has images of multiple dimensions. How do I center the slides. I’ve tried css for text-align as well as a center element, but neither have worked. It also has issues with IE7.