jQuery: carousel

gistfile1.txt

/* 
 * carousel
 * simple carousel for my own use, inspired by ghanesh's implementation
 */

// -------------
// sample css
// -------------
.carousel { position:relative; width:248px; padding:12px 32px; overflow:hidden; }
.carousel ul { width:2000px; }
.carousel li { float:left; width:248px; text-align:center; background:#f4f4f4; margin-right:64px; }
.carousel li img { width:180px; }
.carousel .next, .carousel .prev { position:absolute; top:40px; left:10px; cursor:pointer; z-index:100; }
.carousel .next { left:auto; right:10px; }


// -------------
// sample html
// -------------
	<section id="carousel" data-nav="carousel">
		<h1>Carousel</h1>
		<div class="carousel">
			<span class="prev disabled">◄</span>
			<ul">
				<li style="float: left; "><img src="---.png" alt=""></li>
				<li style="float: left; "><img src="---.jpg" alt=""></li>
				<li style="float: left; "><img src="---" alt=""></li>
			</ul>
			<span class="next">▶</span>
		</div>
	</section>

// -------------
// sample js
// Based on code from: http://www.gmarwaha.com/jquery/jcarousellite/
// -------------

$.fn.carousel = function(o) {
	o = $.extend({
		prev: null,
		next: null,
		jump: null,
		speed: 200,
		easing: null,
		callback: null,
		start: 0,
		// ajax: false,
		width: false	// manually override width
	},
	o || {});
	return this.each(function() {
		var b = false,		// animating
		c = $(this),
		ul = $('ul', c),
		f = $('li', ul),
		next = o.next ? $(o.next) : $('.next', c),
		prev = o.prev ? $(o.prev) : $('.prev', c),
		pages = f.length,
		curr = o.start;

		f.css('float','left');
		ul.css({'position': 'relative'});
		c.css({
			'visibility': 'visible',
			'overflow': 'hidden',
			'position': 'relative',
		});
		var g = o.width ? o.width : f.outerWidth(true); 	// f.get(0).offsetWidth;
		var h = g * pages;

		ul.css('width', h +'px').css('left', -(curr * g));

		if (prev.length > 0) prev.click(function() {
			return go(curr - 1);
		});
		if (next.length > 0) next.click(function() {


			// if(o.ajax && end) {
			// 	var data = { 'p':curr+1 };	// whatever params you want to send, etc.
			// 	var fetch = $('<li></li>').load(o.ajax, data, function(response,err){
			// 		h += g;
			// 		ul.css('width',h +'px');
			// 		fetch.css('float','left').appendTo(ul);						// inject it
			// 		pages++;													// keep track
			// 		items += $('li',fetch).length;
			// 		return go(curr + 1);
			// 	});			
			// }
			// else { 
				// return go(curr + 1);
			// }

			return go(curr + 1);
		});
		if (o.jump) $.each(o.jump, function(i, a) {
			$(a).click(function() {
				return go(i);
			});
		});

		function go(a) {
			if (!b) {

				if (a < 0 || a > pages - 1) return;
				else curr = a;

				b = true;
				ul.animate({left: -(curr * g)}, o.speed, o.easing, function() {
					b = false;
					if (o.callback) { o.callback.call(this, curr, f.slice(curr).slice(0,1) ); }
				});

				next.removeClass("disabled");
				prev.removeClass("disabled");
				$((curr - 1 < 0 && prev) || (curr + 1 > pages - 1 && next) || []).addClass("disabled");

			}
			return false;
		}
	});
}