Image slideshows are a dime a dozen on the web.
You see them used for advertisements, featured articles, product showcases, and plain old photo reels.
Today, we’re going to quickly implement a slideshow using the jQuery plugin Cycle by Mike Alsup.
Cycle is a great plugin with years of development behind it. We’re going to use the Lite version. It lacks some of the features of the full version (like different transitions), but it is super lightweight. While the full version is 49kb, the lite version weighs in at only 8kb.
Let’s begin by creating a project folder. Within this folder create two text files and rename them to index.html and style.css. Also, create two sub-folders named js and img. This is where we will put our javascript files and images, respectively.
Next, we’re going to need the JavaScript library jQuery and the Cycle plugin file. Download the latest version of jQuery here and Cycle here. Put them both in the js folder.
Note: If the files open in your browser as text, right-click the link and “Save as.”
Find, or create, five images for your slideshow and place them in the img folder. Make sure they are all the same size for now.
The Markup
Now, using your favorite text editor, open index.html. Paste the following code in:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div> </div><!-- end container --> </body> </html>The above code sets up a basic HTML file and includes our stylesheet. We also need to include our JavaScript files. Before the closing head tag, include the following lines:
<script src="js/jquery-1.6.2.min.js"></script> <script src="js/jquery.cycle.lite.js"></script>Now index.html should look like this:
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="js/jquery-1.6.2.min.js"></script> <script src="js/jquery.cycle.lite.js"></script> </head> <body> <div> </div><!--...
