As the site's theme is football, go and find more images. I took 3 images from Stock.XCHNG

Here's what the final product will look like

Like my articles? Follow me on Twitter if you want to receive updates as soon as the next part goes live!

Understanding the logic

The logic behind the javascript slider is that there should be a mask, who's height and width are normal, as the top-most layer. Beneath it, a lengthy layer, which will have images floated left to get them in a horizontal line. These images will then move using transitions and javascript.

Here's the HTML for the actual base. Observe that we have a mask div, and inside it, a length div.

Writing the basic javascript

As I do with each and every javascript tutorial, I wrapped everything in a window.onload, like this. Using window.onload ensures that the javascript is loaded only when the rest of the files, images, html, etc is loaded.

window.onload = function() {
//All code
}

I also wrote a function to shorten document.getElementById. As you can guess, document.getElementById is used to fetch HTML elements using their IDs. As you can realize, this is used quite commonly.

What we learnt

Finding and using characters already available to us, instead of loading extra files.

Thinking masks and layers in CSS

Conclusion

We still have three pats of the tutorial series left. As of now, we made considerable progress, and learnt a lot of new and different things.

Let me know what you think of these tutorial series, and what you would like more. If you made anything, link to it too!

Edit: This implementation of a slider uses relatively new CSS and JS properties - Which means that older versions of IE won't be able to function well. It is suggested that you use jQuery, and use an appropriate plugin for your sliding needs. If you have any problems, I am not responsible, and I won't offer support for free.