jQuery Carousel Demo

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

The Foundation – HTML Stucture

In the body create the following html structure for your 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 defined in your JavaScript.

<div class="gallery">
  <img src="https://thomaswallace.net/demos/east-training/1.jpg" alt="Design"> 
  <img src="https://thomaswallace.net/demos/east-training/2.jpg" alt="Design"> 
  <img src="https://thomaswallace.net/demos/east-training/3.jpg" alt="Design"> 
</div>

Adding some Design – CSS

.gallery {
	width: 960px;
	margin: 40px auto;
	border: 1px solid lightgrey;
	height: 560px;
	overflow: hidden;
	border-radius: 4px;
  padding:0;
  box-shadow:0 4px 8px 0 rgba(0,0,0,0.2)
}
.gallery img {
	margin: 30px;
}

Adding the JavaScript

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.

https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

Include Cycle from the CDNJS.com

https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.03/jquery.cycle.all.min.js

Setting up the JavaScript Calls

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...

});

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

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.