1 reply to this topic

[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 by fa_dy, 23 February 2013 - 05:32 AM.

[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.