jQuery Cycle Base Container

cycle-base.js

/*
 * This is a base container for
 * whenever I use jQuery Cycle.
 * http://jquery.malsup.com/cycle/
 *
 * Use this as base HTML
 *
 * <div id="slider">
 * 	<div id="slides">
 * 		<div class="slide" style="display:block">...</div>
 * 		<div class="slide">...</div>
 * 		etc....
 * 	</div>
 * 	<div id="slidenav"></div>
 * 	<div id="slider-prev"></div>
 * 	<div id="slider-next"></div>
 * </div>
 *
 * Use this as base CSS
 *
 * #slider {
 * 	position: relative;
 * }
 * #slides .slide {
 * 	position: absolute;
 * 	top:0;
 * 	left:0;
 * 	display:none;
 * }
 *
 * Don't forget to style the slidenav and
 * prev/next. Otherwise remove them.
 *
 */

// Locate the slide container and assign it to a var
var slider = $('#slides');
// Bail early if the element doesn't exist
if(slider.length > 0)
{
	slider.cycle({
		timeout: 4000,
		pager: '#slidenav',
		prev: '#slider-prev',
		next: '#slider-next',
		pagerAnchorBuilder: function(idx, slide)
		{
			return '<span></span>';
		}
	});
	slider.hover(
		function(){
			// MouseOver
			slider.cycle('pause');
		},
		function(){
			// MouseOut
			slider.cycle('resume');
		}
	);
}