In this article, I will show you how to create a simple slide show using JQuery and the jQuery Cycle Lite plugin.
Step 1. Download the jQuery library
Go to http://www.jquery.com and download the production-ready minified library. The file that I used is jquery-1.2.6.js.
Step 2. Download the jQuery Cycle Lite plugin
Step 3. Create the HTML page to bring it all together
Ok.. let’s explain what’s going on here in the HTML.
Lines 8-15 are where the magic happens. Here we use jQuery to perform the cycle function on the element with the ID of ’slideshow_images’ with the parameters found on lines 11-12. There are many options available, which can be found at plugin website.
Lines 19-25 contains the div with the ID that is referenced on line 10. Inside this are 5 images that are all the same height and width.
That’s it. It’s very simple, but looks great.. sexy even! Have fun with this one.
To download the sample code for this example along with some images I took while I was in Europe, click here.