How to Make Auto-Advancing Slideshows

How to Make Auto-Advancing Slideshows

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.

Join our newsletter and get our PSDs!18,468 people learn about HTML5, JS and more. Join them!

by Martin Angelov

Martin is a web developer with an eye for design from Bulgaria. He founded Tutorialzine in 2009 and it still is his favorite side project.

40 Comments

  1. 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

    1. Martin Angelov says:

      Thank you for catching that! Yes, it should be $('#nextArrow'), and not $('#ntextArrow'). It is now fixed.

  2. Amjad says:

    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! :)

  3. Mladen Kirilov says:

    proper useful as always (:
    keep it up!

  4. Sagar says:

    Too Good!

  5. chris says:

    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

  6. 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.

    1. Martin Angelov says:

      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.

  7. JP says:

    Nice article man! The slider looks really good!

  8. Nick28London says:

    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

    1. Martin Angelov says:

      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.

  9. axel says:

    This is exactly what I needed! Thanks so much!

  10. Max says:

    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!

  11. haider says:

    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

  12. JfromOrem says:

    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.

    1. Kayleigh says:

      I would like to know this, as well!

  13. Raptorz says:

    thanx 4 ur tutorial.. it helped me in making my college assignment

  14. Marida says:

    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.

  15. Sage says:

    Hey great work, very clean!

  16. ira says:

    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.

  17. NoLimitList says:

    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')

  18. NoLimitList says:

    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.

  19. Paul Vortex says:

    This is brilliant - Thanks so much!

  20. Jerry says:

    The slider loads great and the buttons work to navigate through the slideshow but my problem is that the slideshow won't run automatically. The only way to progress through the slideshow is by manually clicking on the navigation buttons. I tried simply uploading the original code and files to my server but I have the same problem. Anyone know if it has to do with my server?

  21. Jerry says:

    Sorry, just found the link to the auto-advance script. Works perfectly now! :D

  22. dpm says:

    Repeating a question above from "Max". As a jquery newbie, I don't quite understand this. How would I know what to change the selectors to?

    “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.”

  23. Ludwig says:

    Great tutorial.

    I was looking for a clean way to make a slideshow with HTML5 for a clients site (Joomla!) and nothing more.
    That is exactly what this is. I don't know any javascript but with this tutorial, the other slideshow tutorial and the files you have for download I could emplement it all with ease.

    The only thing I have to find out is if it is possible to make the transition slower.
    I guess I have to start learning javascript after all ;)

    Thanks a lot!
    I will post the site later, it is not online yet... erm, hope I don't forget.

  24. Ludwig says:

    Hé there,
    This works perfect but on iOS (iPhone) the whole page blurs during the transition. Any ideas why?

    Thanks!

  25. Scott says:

    I set up the non auto advance version of this awesome script and it worked like a charm across browsers and my iPhone. I then decided to also add the auto advance feature and now it is not working on my iPhone. Anyone have a similar issue? I have followed all directions and can't figure out what is going on?

    Everything shows up correctly, but it will not advance either automatically OR when I click on the arrows?

  26. Steph says:

    Hi, brilliant, thanks for the tutorial.... but I was wondering if there's a way to add captions to the slides? I'm no whizz kid at coding, so a simple explanation would be HUGELY appreciated.

    Thanks.

  27. Lori says:

    Repeating a question above from "Max" and "dpm". As a jquery newbie, I don't quite understand this. How would I know what to change the selectors to?

    “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.”

    I'm assuming that is why it's not functioning at all on the server but is on my local hard drive.

  28. Shera says:

    Hi,

    brilliant tutorial, thank you very much !!
    I would like to know how I could change the arrows. I want to put another ones.

    Thanks

  29. Jon says:

    Love the script, been trying to work out how to make it so that the main image when clicked links to another page.

    Anyone modded the script to do that?

  30. Jen Barnes says:

    Great easy script. How can I change the fade speed? Im looking for a gradual fade in and fade out of the images. - Im a jquery newbie. Thanks.

  31. Yuval says:

    This will also resume auto advancing after a 10 seconds.

    $(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);
    			timeOut = setTimeout(autoAdvance, 10000);
    		}
    	});
    
    	// 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);
    	}
    
    	autoAdvance();
    
    });
    
  32. Lisa says:

    Thank you for this. I had been looking of a very simple transition and you nailed it. Keep up the fantastic work, and thanks for sharing.

  33. ivo says:

    i'm trying to slide divs with images and text(not only an image) , but the script stops. Is there a fix fro that ? Not neccassary to have the the overlay effect of the image change , only the fade

  34. Hiren Kansara says:

    Can we use other effect other than fadeIn & fadeOut ? I would like to use slideIn and slideOut effect. Also how can we deactivate auto rotating of images ?

  35. Dev says:

    Hey, I just downloaded the running it from my local machine, when I test in chrome and version 27.0.1453.110 m, its not working, any one can help me on this? Thanks

  36. ArKeL says:

    @Dev, Try it on a local server, Chrome security restriction with local files.

    Mouseover, stop slide. Mouseout, resume it.

    $(window).load(function(){
    
    	// The window.load event guarantees that
    	// all the images are loaded before the
    	// auto-advance begins.
    
    	var timeOut = null;
    	var slideTime = 2000;
    
    	$('#slideshow').mouseover(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);
    			// Resume autoadvance after 10sec
    			//timeOut = setTimeout(autoAdvance, 10000);
    		}
    	}).mouseout(function(e,simulated){
    		timeOut = setTimeout(autoAdvance, slideTime);
    	});
    
    	// 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 4 seconds.
    		timeOut = setTimeout(autoAdvance, slideTime);
    	}
    
    	autoAdvance();
    
    });
    

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links