Carusel infinit cu jQuery

Zilele astea am avut nevoie de un carusel infinit (d-ăla la care dai next până îți vine rău). Cum tot ce am găsit era mult prea încărcat pentru ce aveam eu nevoie (nu pot înțelege de ce fac oamenii plugins care acoperă o infinitate de scenarii posibile), am zis să fac eu unul. Plus că ar fi fost un exercițiu ce mă scotea puțin din rutina în care am intrat în ultima lună.

Markup

Mark-ul simplu: o listă.

<div id="infinity">
	<ul>
		<?php for( $i = 1; $i <= 5; $i++ ){ ?>
		<li><img alt="" src="http://flickholdr.com/251/146/nature/<?php echo $i; ?>"></li>
		<?php } ?>
	</ul>
</div>

CSS

CSS este la fel de basic. Specificăm width pentru ambele elemente pentru a evita flicker și jump la încărcarea paginii:

#infinity,
.ntz_infiniteCarouselWrap {
	width:842px;
}
.ntz_infiniteCarouselWrap {
	overflow:hidden;
	margin:50px auto;
	position:relative;
}
	#infinity li,
	.ntz_infiniteCarouselWrap li {
	    float: left;
	    overflow: hidden;
	    position: relative;
	    height: 158px;
	    margin: 0 11px;
	    width: 263px;
	}
	.ntz_infiniteCarouselWrap .nav {
		position:absolute;
		left:0px;
		width:15px;
		height:14px;
		background:#ccc;
		top:50%;
		margin-top:-7px;
	}
.ntz_infiniteCarouselWrap .nav.next {left:auto;right:0px;}

JavaScript

Simplu și eficient (cred):

(function( $ ){
	$.fn.ntz_infiniteCarousel = function() {
		return this.each(function(){
			var carousel = $(this),
					etalon = $('li:first', carousel);

			carousel.wrap('<div class="ntz_infiniteCarouselWrap"></div>');

			var w = carousel.closest('.ntz_infiniteCarouselWrap'), //the wrap
					n = $('<a href="#" class="nav prev"/><a href="#" class="nav next"/>'), // the navigation
					inc = etalon.outerWidth(true), // increment - the width of an element ( is the same amount of px to be scrolled )
					ul = $('ul', carousel),
					perPage = Math.ceil( w.width()/inc ), // how many elements are displayed per page
					fX = $('li:lt(' + perPage + ')', ul).clone(), // first and last X elements ( x = perPage)
					lX = $('li:gt('+ ( $('li', ul).length - perPage-1 ) +')', ul).clone(),
					s = $('li.s', carousel); // selected
			w.addClass( carousel.attr('id') );

			ul.append(fX).prepend(lX); // adding elemnts on begining and the end for infinite loop

			var	ulW = $('li', ul).length * inc, // width for ul
					maxPos = -1*(ulW - inc*perPage - perPage); // max position
			ul.width( ulW ).css({marginLeft:-inc*perPage}); 

			n.click(function(){
				var t = $(this),
						curPos = parseInt(ul.css('marginLeft'), 10);

				if( ul.is(':animated') ) {return false;} // we don't need multiple scrolls

				if( t.hasClass('prev') ){ // scroll left
					if( curPos >= 0 ){
						ul.css({ marginLeft: -( ulW - inc * perPage*2 ) }); // infinite loop
					}
					ul.animate({ marginLeft:'+='+inc })
				}

				if ( t.hasClass('next') ) { //scroll right
					if( maxPos >= curPos ){
						ul.css({ marginLeft: - inc * perPage }); // infinite loop
					}
					ul.animate({ marginLeft:'-='+inc });
				}
				return false;
			});
			n.appendTo(w);

		});
	}; // ntz_infiniteCarousel
})( jQuery );

$('#infinity').ntz_infiniteCarousel();

Enjoy!