Infinite Carousel

jquery.infinite-carousel.js

/**
 * @author Stéphane Roucheray 
 * @extends jquery
 * http://code.google.com/p/jquery-infinite-carousel/
 */

/** 
 * Modified by Laurence Gillian
 */


(function($) {
	$.fn.carousel = function(options) {
		// build main options before element iteration, so extended the options
		// this can be removed, but it possible it will be needed later
		var opts = $.extend({}, options);
				
		// Lets create some carousels
		return $(this)
		
			// Debugging
			$(this).addClass("true");
			alert("Why is the element not being returned?")

			// Variables
			var sliderList = $(this).children()[0];
			var previous = $(this).prev('.prev');
			var next = $(this).next('.next');
			
			// Are there Children to Carousel?
			if (sliderList) {

				var increment = $(sliderList).children().outerWidth("true"),
				elmnts = $(sliderList).children(),
				numElmts = elmnts.length,
				sizeFirstElmnt = increment,
				shownInViewport = Math.round($(this).width() / sizeFirstElmnt),
				firstElementOnViewPort = 1,
				isAnimating = false;

				for (i = 0; i < shownInViewport; i++) {
					$(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
					$(sliderList).append($(elmnts[i]).clone());
				}

				$(previous).click(function(event){
					if (!isAnimating) {
						if (firstElementOnViewPort == 1) {
							$(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
							firstElementOnViewPort = numElmts;
						}
						else {
							firstElementOnViewPort--;
						}

						$(sliderList).animate({
							left: "+=" + increment,
							y: 0,
							queue: true
						}, "swing", function(){isAnimating = false;});
						isAnimating = true;
					}
				});

				$(next).click(function(event){
					if (!isAnimating) {
						if (firstElementOnViewPort > numElmts) {
							firstElementOnViewPort = 2;
							$(sliderList).css('left', "0px");
						}
						else {
							firstElementOnViewPort++;
						}
						$(sliderList).animate({
							left: "-=" + increment,
							y: 0,
							queue: true
						}, "swing", function(){isAnimating = false;});
						isAnimating = true;
					}
				});	
			}
			
		};

})(jQuery);

jQuery(function() {
  $('.carousel').carousel();
});

markup.html

<aside role="complementary" class="features bggr-02">
			<div class="container">
				<a class="bggr-02 nav js-only prev">Previous</a> 
				<div class="carousel">
					<ul>
						<li>
							<h1><a href="#">Graduates</a></h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis blandit.</p>
						</li>
						<li>
							<h1>Future Talent</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis blandit.</p>
							<img src="http://placehold.it/198x128/ffb8ea/000" width="198" height="128" alt="" />
						</li>
						<li>
							<h1>Leaders</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis blandit.</p>
						</li>
						<li>
							<h1>Managers</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis blandit.</p>
							<img src="http://placehold.it/198x128/ffb8ea/000" width="198" height="128" alt="" />
						</li>
						<!-- Hidden -->
						<li>
							<h1><a href="#">Graduates</a></h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis blandit.</p>
						</li>
						<li>
							<h1>Future Talent</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis blandit.</p>
							<img src="http://placehold.it/198x128/ffb8ea/000" width="198" height="128" alt="" />
						</li>
						<li>
							<h1>Leaders</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis blandit.</p>
						</li>
						<li>
							<h1>Managers</h1>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sagittis blandit.</p>
							<img src="http://placehold.it/198x128/ffb8ea/000" width="198" height="128" alt="" />
						</li>
					</ul>
				</div>
				<a class="bggr-02 nav js-only next">Next</a>
			</div>
		</aside>