Question

Not sure if this is possible but I have a slideshow on my site that when a button is click the relevant slide, slides in.

What I want to do is add a timer so that after 3 seconds the next button is clicked, making my slideshow slide automatically.

$('#button a').click(function(){
    var integer = $(this).attr('rel');
    $('#myslide .cover').animate({left:-720*(parseInt(integer)-1)})  /*----- Width of div mystuff (here 160) ------ */
    $('#button a').each(function(){
    $(this).removeClass('active');
        if($(this).hasClass('button'+integer)){
            $(this).addClass('active')}
    });


});

---

Ive added a Fiddle…
http://jsfiddle.net/5jVtK/

Answer 1

The simplest way to do this is to use setTimeout (happens once after a delay) or setInterval (happens every so often).

setTimeout( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );

setInterval( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );

Once you get this implemented, you may want to think about some other niceties, such as stopping the automatic progression when the user’s mouse is over the next button or over the slideshow (since that implies interest in what is currently displayed) and resuming the autoadvance on mouseout.

Next: it sounds like you need to figure out how to dynamically find the correct button to trigger to keep advancing through multiple slides. This is one way to do it:

`

function click() {
    // Find the button for the next slide in relationship to the currently active button
    var $next = $( '#button' ).find( '.active' ).next( 'a' );

    // If there isn't one, go to the beginning
    if ( ! $next.length ) {
        $next = $( '#button' ).find( 'a' ).first();
    }

    // Trigger the click
    $next.trigger( 'click' );

    setTimeout(click, 3000);
}

setTimeout(click, 3000);

Here’s a link to a fiddle showing this in action:

http://jsfiddle.net/5jVtK/1/