In this example we will build a simple slideshow using jQuery and the cycle plugin.

Download Source Files | Demo

The Foundation

1. In your web root create a new folder named cycle.
2. In the cycle directory create your sub directory structure (assets directory with sub directories)
3. In an editor of your choice create a new html document (html5 doctype) | Starter HTML
4. In the body create the structure for you content. The way the Cycle plugin works is that it will look take the the children of the declared element and cycle through them using the parameters define your JavaScript.

<div class="gallery">
  <img src="assets/images/1.jpg" alt="Hubble"> 
  <img src="assets/images/2.jpg" alt="Hubble"> 
  <img src="assets/images/3.jpg" alt="Hubble"> 
  <img src="assets/images/4.jpg" alt="Hubble">
</div>

5. Add some CSS to spruce things up…

* {
	margin: 0px;
	padding: 0px;
}
body {
	background-color: #000;
}
.gallery {
	background-color: #CCC;
	width: 730px;
	margin-top: 40px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid #999;
	height: 516px;
	overflow: hidden; /*Avoids showing all of the images momentarily while JS loads */
	border-radius: 4px;
}
.gallery img {
	margin: 15px;
}

Adding the JavaScript

1. Include jQuery from the Google CDN. This script tag can be placed in the head of the document or before the closing html tag. Make sure that it precedes the call to the plugin we’ll include in the next step.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

2. Include Cycle from the CDNJS.com

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js"></script>

Setting up the JavaScript Calls

1. Create a new file called local-calls.js and save it in the scripts directory.
2. Include the jQuery wrapper function to make sure the document has fully loaded prior to calling the script.

$(document).ready(function() {

// Your code goes here...

});

3.  Include this file in the head of the document following the jQuery and Cycle calls.

<script src="assets/scripts/local-calls.js"></script>

4.  In the local-calls.js file, include the following…

    $('.gallery').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});

Note that we are binding the script to the .gallery element. If you used a different naming convention you would need to change this to reference that element. Play around with the effects by adding different parameters to the script. Use this page for reference.