Make your own jQuery slider using XML

Just a few days ago I had to build a slideshow on a website I developed. However, I couldn't find a proper slider that would work exactly as I wanted it to.

The end result was that I coded a custom slider, and I am sharing the process with you. By the end of this article you'll be able to create a jQuery powered slider that uses XML to store information.

Why XML
I used XML because not all slides needed for the website contained vital information. Only the first slide contained critical information. I used XML because it allowed me to keep a clear and short source code that search engines would definitely like.

Progressive enhancement?
If javascript were turned off then the slider wouldn't work and it wouldn't load any content from the XML.

The slider's canvas would be left blank. To fix this issue the first slide of the presentation is also included inside the html source of the site and is replaced via javascript, if available.

Slider description
I needed the slideshow to be dynamic — support variable number of slides. I also wanted the slider to have numeric controls and no thumbnails or any other gizmos. I also wanted to have all sorts of html tags inside the slides, not just images or movies.

I also needed the slider to move forward on a given interval. And all these features were implemented, and you will be able to do the same by the end of this article.