set timer to call a jquery function?

[fa_dy]

Hello guys, I have a quick question. I have a div slider set up to scroll through the content under Our Works and Our Clients on homepage of this website http://www.edhubdemo.com/wp/. When you click on the next and the previous buttons, the slider moves forward and backward respectively. Now what I want is that the slider should automatically move even when the next and previous buttons are not clicked. I searched for a solution over the internet and the closest solution which I found was to set timer to call the click function but I can't seem to implement that on this code. Here's the jquery liquid carousel code which I am using:

 

[/size][/font][/color]

(function($){
$.fn.liquidcarousel = function(options) {

var defaults = {
	duration: 100,
	hidearrows: true
};
var options = $.extend(defaults, options);

   return this.each(function() {
		var divobj = $(this);

		$(divobj).css('overflow', 'hidden');

		$('> .wrapper', divobj).css('overflow', 'hidden');
		$('> .wrapper', divobj).css('float', 'left');

		$('> .wrapper > ul', divobj).css('float', 'left');
		$('> .wrapper > ul', divobj).css('margin', '0');
		$('> .wrapper > ul', divobj).css('padding', '0');
		$('> .wrapper > ul', divobj).css('display', 'block');

		$('> .wrapper > ul > li', divobj).css('display', 'block');
		$('> .wrapper > ul > li', divobj).css('float', 'left');

		var visiblelis = 0;
		var totallis = $('> .wrapper > ul > li', this).length;
		var currentposition = 0;
		var additionalmargin = 0;
		var totalwidth = 0;

		$(window).resize(function(e){
			var divwidth = $(divobj).width();
			var availablewidth = divwidth;

			var heighest = 0;
			$('> .wrapper > ul > li', divobj).css("height", "auto");
			$('> .wrapper > ul > li', divobj).each(function () {
				if ( $(this).outerHeight() > heighest ) {
					heighest = $(this).outerHeight();
				}
			});

			$(divobj).height(heighest);
			$('> .wrapper', divobj).height(heighest);
			$('> .wrapper > ul', divobj).height(heighest);
			$('> .wrapper > ul > li', divobj).height(heighest);

			var liwidth = $('> .wrapper > ul > li:first', divobj).outerWidth(true);
			var originalmarginright = parseInt($('> .wrapper > ul > li', divobj).css('marginRight'));
			var originalmarginleft = parseInt($('> .wrapper > ul > li', divobj).css('marginLeft'));
			totalwidth = liwidth + additionalmargin;

			previousvisiblelis = visiblelis;
			visiblelis = Math.floor((availablewidth / liwidth));

			if (visiblelis < totallis) {
				additionalmargin = Math.floor((availablewidth - (visiblelis * liwidth))/visiblelis);
			} else {
				additionalmargin = Math.floor((availablewidth - (totallis * liwidth))/totallis);
			}
			halfadditionalmargin = Math.floor(additionalmargin/2);
			totalwidth = liwidth + additionalmargin;

			if (visiblelis > previousvisiblelis  || totallis <= visiblelis) {
				currentposition -= (visiblelis-previousvisiblelis);
				if (currentposition < 0 || totallis <= visiblelis ) {
					currentposition = 0;
				}
			}
			$('> .wrapper > ul', divobj).css('marginLeft', -(currentposition * totalwidth));

			if (visiblelis >= totallis || ((divwidth >= (totallis * liwidth)) && options.hidearrows) ) {
				if (options.hidearrows) {
					$('> .prev', $(divobj).parents(".widget")).hide();
					$('> .next', $(divobj).parents(".widget")).hide();

					additionalmargin = Math.floor((divwidth - (totallis * liwidth))/totallis);
					halfadditionalmargin = Math.floor(additionalmargin/2);
					totalwidth = liwidth + additionalmargin;
					$('> .wrapper > ul > li', divobj).css('marginRight', originalmarginright + halfadditionalmargin);
					$('> .wrapper > ul > li', divobj).css('marginLeft', originalmarginleft + halfadditionalmargin);
				}
				$('> .wrapper', divobj).width(totallis * totalwidth);
				$('> ul', divobj).width(totallis * totalwidth);
				$('> .wrapper', divobj).css('marginLeft', 0);
				currentposition = 0;
			} else {
				$('.prev', $(divobj).parents(".widget")).show();
				$('.next', $(divobj).parents(".widget")).show();
				$('> .wrapper', divobj).width(visiblelis * totalwidth);
				$('> ul', divobj).width(visiblelis * totalwidth);
			}
		});

		$('.next', $(divobj).parents(".widget")).click(function(){

			if (totallis <= visiblelis) {
				currentposition = 0;
			} else if ((currentposition + (visiblelis*2)) < totallis) {
				currentposition += visiblelis;
			} else if ((currentposition + (visiblelis*2)) >= totallis -1) {
				currentposition = totallis - visiblelis;
			}
			$('> .wrapper > ul', divobj).stop();
			$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
		});

		$('.prev', $(divobj).parents(".widget")).click(function(){
			if ((currentposition - visiblelis) > 0) {
				currentposition -= visiblelis;
			} else if ((currentposition - (visiblelis*2)) <= 0) {
				currentposition = 0;
			}
			$('> .wrapper > ul', divobj).stop();
			$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
		});

		$('.next', $(divobj).parents(".widget")).dblclick(function(e){
			e.preventDefault();
			clearSelection();
		});

		$('.prev', $(divobj).parents(".widget")).dblclick(function(e){
			e.preventDefault();
			clearSelection();
		});

		function clearSelection() {
			if (document.selection && document.selection.empty) {
				document.selection.empty();
			} else if (window.getSelection) {
				var sel = window.getSelection();
				sel.removeAllRanges();
			}
		}

		$(window).resize();
   });


}; 
[color=#000000]})(jQuery);[/color][color=#000000][font=Tahoma, Verdana, Arial][size=3]

 

This is the part of the code which moves the slider forward when the next button is clicked:

 

[/size][/font][/color]

$('.next', $(divobj).parents(".widget")).click(function(){

			if (totallis <= visiblelis) {
				currentposition = 0;
			} else if ((currentposition + (visiblelis*2)) < totallis) {
				currentposition += visiblelis;
			} else if ((currentposition + (visiblelis*2)) >= totallis -1) {
				currentposition = totallis - visiblelis;
			}
			$('> .wrapper > ul', divobj).stop();
			$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
		});
[color=#000000][font=Tahoma, Verdana, Arial][size=3]

 

And this is the part of the code which makes the slider move backwards when the previous button is clicked:

 

[/size][/font][/color]

$('.prev', $(divobj).parents(".widget")).click(function(){
			if ((currentposition - visiblelis) > 0) {
				currentposition -= visiblelis;
			} else if ((currentposition - (visiblelis*2)) <= 0) {
				currentposition = 0;
			}
			$('> .wrapper > ul', divobj).stop();
			$('> .wrapper > ul', divobj).animate({'marginLeft': -(currentposition * totalwidth)}, options.duration);
		});
[color=#000000][font=Tahoma, Verdana, Arial][size=3]

 

This is the code which I found over the internet for calling a function using jquery timer but I couldn't integrate it inside the liquid carousel code:

 

[/size][/font][/color]

window.setInterval(yourfunction, 10000);

function yourfunction() { alert('test'); }
[color=#000000][font=Tahoma, Verdana, Arial][size=3]

 

I want it to be this way that the slider automatically scrolls to the next 4 items after 7 seconds, then to the next 4 items after 7 seconds and then the same happens for backward. It'll be like this that the 'click next' function is called automatically after every 7 seconds and then the 'click previous' function is called after every 7 seconds. I hope this is possible. Looking forward to a solution. Thank you.

Edited February 23, 2013 by fa_dy

[denno020]

window.setInterval(yourfunction, 10000);

 

I just did a quick search and found that. Looks like it'll be able to do what you want.