A class to manage a simple slideshow with jQuery.

slideshow.js

/**
 * Slideshow
 */

( function( $ ) {

	$.PilauSlideShow = function( options ) {

		/** The slideshow wrapper element */
		this.el = options.el;

		/** The element into which the navigation arrows are added */
		this.nav = this.el.find( options.nav );

		/** The ID base for the list elements (usually suffixed by "-n", denoting the initial sequence, starting with 1 */
		this.id_base = ( typeof options.id_base != 'undefined' ) ? options.id_base : 'slide';

		/** Scroll speed */
		this.scroll_speed = ( typeof options.scroll_speed != 'undefined' ) ? options.scroll_speed : 500;

		/** Autostart scrolling? */
		this.autoscroll = ( typeof options.autoscroll != 'undefined' ) ? options.autoscroll : false;

		/** Pause or stop autoscroll on hover? */
		this.autoscroll_hover = ( typeof options.autoscroll_hover != 'undefined' ) ? options.autoscroll_hover : 'pause';

		/** Autoscroll interval */
		this.autoscroll_interval = ( typeof options.autoscroll_interval != 'undefined' ) ? options.autoscroll_interval : 7000;

		/** Autoscroll timer */
		this.scroll_timer = null;

		/** Callback function to call after slideshow scrolls */
		this.scroll_callback = ( typeof options.scroll_callback != 'undefined' ) ? options.scroll_callback : null;

	};

	$.PilauSlideShow.prototype = {

		/** Initialize */
		init: function() {
			var ss = this; // So that ss can be used inside jQuery functions, where `this` refers to the selected element
			ss.list = ss.el.find( '.list' );
			ss.width = ss.list.width();
			ss.length = ss.list.children( 'li' ).length;

			// Initialize list width
			ss.list.width( this.width * this.length + 'px' );

			// The first is current
			ss.list.children( 'li:first-child' ).addClass( 'current' );

			// Nav arrows
			ss.nav.append( '<a href="#" class="nav left"></a><a href="#" class="nav right"></a>' );
			ss.el.on( 'click', 'a.nav', function() {
				var el = $( this );

				// Completely stop scrolling
				ss.stop();

				if ( ! el.hasClass( 'disabled' ) ) {
					// Temporarily disable both nav links
					ss.nav.find( 'a.nav' ).addClass( 'disabled' );
					ss.scroll( el.hasClass( 'left' ) ? 'left' : 'right' );
				}

				return false;
			});

			// Hover anywhere on slideshow
			ss.el.on( 'mouseover', function() {
				// Always stop autoscrolling on mouseover (not completely - may be just pausing)
				clearInterval( ss.scroll_timer );
			} ).on( 'mouseout', function() {
				// If only a pause was flagged, restart autoscrolling if appropriate
				if ( ss.el.hasClass( 'autoscroll' ) && ss.autoscroll_hover == 'pause' ) {
					ss.scroll_timer = setInterval( function() { ss.scroll( 'right' ) }, ss.autoscroll_interval );
				}
			});

			// Initiate auto-scrolling
			if ( ss.autoscroll ) {
				ss.el.addClass( 'autoscroll' );
				ss.scroll_timer = setInterval( function() { ss.scroll( 'right' ) }, ss.autoscroll_interval );
			}


		},

		/** Scroll slideshow */
		scroll: function( dir ) {
			var ss = this;
			var cur = ss.list.children( 'li.current' );
			var clo = parseInt( ss.list.css( 'left' ) );
			var nlo;

			// Is there an image ready in the direction we're going?
			switch ( dir ) {

				case 'left':
					if ( ! cur.prev().length ) {
						// Move from the other end
						ss.list.children( 'li:last-child' ).insertBefore( cur );
						// Adjust positioning
						ss.list.css( 'left', '-' + ss.width + 'px' );
						// Set new left offset for animation
						nlo = 0;
					} else {
						// Set new left offset for animation
						nlo = clo + ss.width;
					}
					// Adjust current class
					cur.removeClass( 'current' ).prev().addClass( 'current' );
					break;

				case 'right':
					if ( ! cur.next().length ) {
						// Move from the other end
						ss.list.children( 'li:first-child' ).insertAfter( cur );
						// Adjust positioning
						ss.list.css( 'left', clo + ss.width + 'px' );
						// Set new left offset for animation
						nlo = 0 - ( ss.width * ( ss.length - 1 ) );
					} else {
						// Set new left offset for animation
						nlo = clo - ss.width;
					}
					// Adjust current class
					cur.removeClass( 'current' ).next().addClass( 'current' );
					break;

			}

			// Now animate
			if ( typeof nlo != 'undefined' ) {
				ss.list.animate({ 'left': nlo + 'px' }, ss.scroll_speed, function() {
					// Callback
					ss.do_scroll_callback();
				});
			}

			// Re-enable links
			ss.nav.children( 'a.nav' ).removeClass( 'disabled' );

		},

		/**
		 * Scroll slideshow to a particular slide
		 *
		 * Relies on the list items in the markup having ids ending with "-n",
		 * where n numbers the initial sequence of the slides from 1 up.
		 */
		scrollTo: function( n ) {
			var ss = this;
			var cur = ss.list.children( 'li.current' );
			var cur_n = pilau_get_string_part( cur.attr( 'id' ) );
			var to = ss.list.children( 'li#' + ss.id_base + '-' + n );
			var nlo = 0;
			var i;

			// Is index in range, and not the current one?
			if ( to.length && n != cur_n ) {

				// Get the actual index of the target item
				i = ss.list.children( 'li' ).index( to );

				// Scroll
				nlo = 0;
				if ( i > 0 ) {
					nlo -= ( i * ss.width );
				}
				ss.list.animate({ 'left': nlo + 'px' }, ss.scroll_speed, function() {
					// Callback
					ss.do_scroll_callback();
				});

				// Switch classes
				cur.removeClass( 'current' );
				to.addClass( 'current' );

			}

		},

		/** Stop slideshow */
		stop: function( dir ) {
			clearInterval( this.scroll_timer );
			this.el.removeClass( 'autoscroll' );
		},

		/** Do scroll callback if possible */
		do_scroll_callback: function() {
			var ss = this;
			var cb;

			if ( ss.scroll_callback !== null ) {
				cb = window[ ss.scroll_callback ];
				if ( typeof cb === 'function' ) {
					cb();
				}
			}

		}

	};

}( jQuery ) );