Question

I have a well functioning div slider: http://jsfiddle.net/UqSFr/2/

The basic function is this:

$("#NextButton").click(function(e) { 
e.preventDefault();
if ( $("#h_wrapper").is(':not(:animated)') && $("#NextButton").is(':not(:animated)') ) {
    var newMargin = CurrentMargin() - SlideWidth;
    $("#h_wrapper").animate({ marginLeft: newMargin }, SlideSpeed, function () { SetNavigationDisplay() }); 
}
});

In addition to the click functionality, I want to add a timer so if not clicked in 5 seconds, it should move to the next.

The timer should be reset on click

When the end is reached it must go to the first div (marginLeft = 0)

Answer 1

Have a look at this code

$(document).ready(function(e) {
    var index = 0;
    var count = $('#h_wrapper').children().length; // set this value dynamically

    var interval = setInterval(next, 1000); // create the interval

    // move to next slide
    function next() {
        index = (index + 1) % count;
        goto(index);
    }

    // move to previous slide
    function previous() {
        index = (index + count - 1) % count; // not too pretty, but it works
        goto(index);
    }

    // go to slide x
    function goto(x) {
        var margin = index * SlideWidth; // set offset by index + width

        $('#h_wrapper').stop().animate({ // stop cancels any running animations
            'margin-left': margin
        }, SlideSpeed, function(e) {
            SetNavigationDisplay();
        });
    }

    // set click handlers
    $("#NextButton").click(next);
    $("#PreviousButton").click(previous);
});

It’s pretty easy. By saving the index it’s easier to calculate next and previous offset. Splitting the entire animation into a separate function, the code doesn’t gets easier to read and understand, but easier to call as well.