Learn and share. The simplest harmony.

 

Creating Consecutive Slide Using jQuery

Posted on March 17, 2012 and got 6 shouts so far

On displaying product items sometimes we need to slide each item consecutively not to slide each block of a group items. In this tutorial we’re going to create them using jQuery with the help of JavaScript native function window.setTimeout for holding animation sequence of each item.

Building Product List

The item will be displayed horizontally and item to be displayed are 6 items. For the item image we’ll using Yummy! icon set from Smashing Magazine created by Iconeden, next and previous button will be put on the right and left side of product list, respectively. Here’s the markup and styling :

	
		
	.list {
		display: inline-block;
		list-style-type: none;
		margin: 0;
		width: 100000px;
		text-align: left;
		background: url('images/wood.png') bottom left no-repeat;
	}
		
		.list li {
			display: inline-block;
			width: 78px;
			margin: 2.2em 1.4em;
			position: relative;
			vertical-align: bottom;
		}
			
	.next, .prev {
		display: block;
		position: absolute;
		width: 35px;
		height: 35px;
		cursor: pointer;
		border-radius: 5px;
	}
	
	.next {
		margin-top: -7.2em;
		right: 5%;
		background: url('images/next.png') center center no-repeat;
	}
	
		.next:hover { background: rgba(255,255,255,0.3) url('images/next.png') center center no-repeat; }
	
	.prev {
		margin-top: 3em;
		left: 5%;
		background: url('images/prev.png') center center no-repeat;
	}
	
		.prev:hover { background: rgba(255,255,255,0.3) url('images/prev.png') center center no-repeat; }

The result of our markup will be like following image :


Initializing Variables

First to go is initializing all variables we need later. The interesting variable will be the stack of item array and its reversed, they’ll be accessed by the next and prev button respectively.

onMoving		= false;
item			= $('.list li');
itemReverse		= item.get().reverse();
itemSize		= item.size();
itemDisplayed	= 6;
itemToSlide		= itemDisplayed * 9;
currentSlide	= 1;
page			= Math.round(itemSize/itemDisplayed);


Adding Event Click

After creating the markup we’ll add click event on previous and next button, if the items is moving we’ll return false also when the slide reach last and first slide.

$('.next').click(function() {

	if(onMoving || currentSlide >= 3) return false;
	onMoving = true, currentSlide++;		
});
	
$('.prev').click(function() {
	
	if(onMoving || currentSlide == 1) return false;
	onMoving = true, currentSlide--;	
});


Moving Consecutively

To make the item moving consecutively we have to access each item using $.each() function. When accessing each item we’ll move them and hold previous or next item on moving in some time to avoid they’re moving concurrently, we’ll use .animate() and window.setTimeout respectively.

$.each(item, function() {
	
	var i 	 = $(this).index();
	var delay = i * 100;

	window.setTimeout(function (index) {
		return function () {
			item.eq(index).stop().animate({ 'right' : '+='+itemToSlide+'em' }, function() {
				if(index >= itemSize-1) onMoving = false;
			});
		};
	} (i), delay);
});

Notice that we’ve created private function inside window.setTimeout, this aims to tell .animate() function moving the right item since we’re declaring them inside $.each() function. After all item moved correctly, we’ll set onMoving to false for telling that we’re not on moving items.


We’re Done

We’re all set up, we can implement this technique for vertical direction too by changing animation direction on .animate(). Please enjoy and share your thought.

 

This Post Tags :

Bookmark Post :

Pin It
  • *bookmarked*
    Can I add the effect of “bounce” in every picture?

    • Of course ;)

  • Works even good on iPad!

  • Beautiful script, do you can make a html code for blogger? thanks

  • Cool guide, but why it isn’t written to work in IE in the first place? i had to change the whole CSS and even the JS.

    Like the li elements should be floated, because IE renders a small space when displayed inline – or the variable name “item” – don’t know why, but IE does not like a variable to be named “item”.

  • Thank you Hidayat Sagita, very nice script that you share with us ;)
    Thank you Mike, the modification work like a charm ;)
    Cheers