How to Make Auto-Advancing Slideshows

jQuery | Tip
Demo Download

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.

Bootstrap Studio

The revolutionary web design tool for creating responsive websites and apps.

Learn more

Related Articles

Linus Metzler

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

Martin Angelov

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

Amjad

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

Mladen Kirilov

proper useful as always (:
keep it up!

Sagar

Too Good!

chris

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

Nick Plekhanov

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.

Martin Angelov

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.

JP

Nice article man! The slider looks really good!

Nick28London

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

Martin Angelov

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.

axel

This is exactly what I needed! Thanks so much!

Max

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!

haider

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

JfromOrem

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.

Kayleigh

I would like to know this, as well!

Raptorz

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

Marida

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.

Sage

Hey great work, very clean!

ira

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.

NoLimitList

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

NoLimitList

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.

Paul Vortex

This is brilliant - Thanks so much!

Jerry

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?

Jerry

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

dpm

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

Ludwig

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.

Ludwig

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

Thanks!

Scott

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?

Steph

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.

Lori

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.

Shera

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

Jon

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?

Jen Barnes

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.

Yuval

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();

});
Lisa

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.

ivo

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

Hiren Kansara

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 ?

Dev

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

ArKeL

@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();

});
Jesus

Good Job!
But it doesn't work if the img sources are URLs. It crash on js. It works perfect if the images are at server with relative path.

Thnks anyway!