Question

I have THIS slideshow. I want it to auto-advance unless someone clicks the navigation elements.
I was thinking about simulating consecutive click events on each link at a certain amount of time (3000 ms, for instance), but my code is ineffective (I’m not so good at JavaScript/jQuery, I admit it). Martin Angelov’s nice tutorial, unfortunately does not meet my needs.
Can anyone give a hand please? Thank you!

Answer 1

A version adapted from the function in the linked tutorial. The code could be more condensed, but I tried to make it as clear as possible what’s going on.

    (function autoAdvance(index){
    //We use index to keep track of which nav link you should be clicking on.

    //Click on the next nav link
    var allNavLinks = $('#slidernav a'); //This selector gets every anchor that is a descendant of your slidernav list
    var currentNavLink = allNavLinks.get(index);
    currentNavLink.click(); //Simulates a click on your nav link

    // Schedule your next autoAdvance
    var clickNextFn = function(){autoAdvance((index+1)%allNavLinks.length)}; //You need to wrap the callback to autoAdvance in a function so that setTimeout can evaluate it later.
    timeOut = setTimeout(clickNextFn,5000); //Will call the clickNextFn in 5 seconds
})(0); //Start the function by auto clicking on index 0