jquery - Div slider. Add timer of 5 seconds to auto-slide -

jquery - Div slider. Add timer of 5 seconds to auto-slide -

i have functioning div slider: http://jsfiddle.net/uqsfr/2/

the basic function 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 add-on click functionality, want add together timer if not clicked in 5 seconds, should move next.

the timer should reset on click

when end reached must go first div (marginleft = 0)

have @ code

$(document).ready(function(e) { var index = 0; var count = $('#h_wrapper').children().length; // set value dynamically var interval = setinterval(next, 1000); // create interval // move next slide function next() { index = (index + 1) % count; goto(index); } // move previous slide function previous() { index = (index + count - 1) % count; // not pretty, works goto(index); } // go slide x function goto(x) { var margin = index * slidewidth; // set offset index + width $('#h_wrapper').stop().animate({ // stop cancels running animations 'margin-left': margin }, slidespeed, function(e) { setnavigationdisplay(); }); } // set click handlers $("#nextbutton").click(next); $("#previousbutton").click(previous); });

it's pretty easy. saving index it's easier calculate next , previous offset. splitting entire animation separate function, code doesn't gets easier read , understand, easier phone call well.

jquery html timer slider