Metro style slideshow using jQuery, CSS and HTML!

Type: Tutorial, Level:Easy

I had a client who wanted a metro-style slide show on their homepage. I didn't knew much about metro, so after a few hit and trials, I finally managed to get it working. Here, is the final result with fiddle.  (Click on result tab below)

Now, I will explain, how it works and the code.

The HTML:

Below is the HTML code:

//The HTML code

<div id="tileHoldings">
<ul id="content">
<li data-delay="3000" speed="1000">Your Content Here</li>
    <li data-delay="3000"  speed="1000" style="background-color:blue">Your Content Here 2<img src="http://arizonafoothillsmagazine.com/images/stories/april09/face-recognition.jpg"/></li>
<li data-delay="3000" speed="1000" style="background-color:green">Your Content Here 3</li>
    <li data-delay="3000"  speed="1000" style="background-color:yellow">Your Content Here 4</li>
</ul>

</div> // Ends here

As you can see there is one div "tileHoldings" used to hold the tiles. Next, there is a list, this list has some list items which actually are the tiles. You can add any number of tiles. Since <div>'s can lie inside <li>, you can add any content to these tiles. Each <li> item has two attributes, one is "data-delay", use to tell how much to wait for the next tile and "speed", the speed of the current tile. Easy!

The CSS: 

#tileHoldings{width:300px; height:200px; background-color:red; position:relative; overflow:hidden;}
li{height:200px; width:300px; position:absolute; left:0px; top:200px;}

The important things to note in the CSS are:

1. Width and Height of <li> and "tileHoldings" , the tiles can have any width or height. Assign the same value to both "tileHoldings" and <li>.
2. <li>'s position should be absolute. Since each tile goes from the bottom all the way up, THEY ALL INITIALLY ARE AT THE BOTTOM. 

The CODE: 

Now the main jQuery code:

//Call the function when the document gets ready 

$(document).ready(function(){

var items=$("#content>li");//Get all the list items, any no. of <li> items can be used in the html. 
var count=0;//Count to check present <li> element/tile
var previouscount;//Count to check previous <li> element/tile
var interval;//variable to refrence setInterval
showtile();//Call main function first time
function showtile()
{

var tilespeed=parseInt($(items[count]).attr("speed"));//Get tile speed
var tiledelay=parseInt($(items[count]).attr("data-delay"));//Get time to wait for next tile
    $(items[count]).animate({top:"0px"}, tilespeed, function()

     {

      if(previouscount)//Check if previous exists
        { 
          $(items[previouscount]).animate({top:"200px"}, 1000);//Reset previous tile

        }
     });
        interval = window.clearInterval(interval);//clear the previous interval, to prevent errors. 
        interval = window.setInterval(function() {   //Reset the interval
            if (count <= (items.length - 1)) {//Check if not last tile
                count++; //Increment count
                previouscount = count - 1; //Set previous
                showtile();//Recursion
            }
            if (count == items.length ) {//If last tile
                previouscount=count-1;
                count = 0;//Reset counter
                showtile();//Recursion
            }
        }, tiledelay);//The tile delay

}
});