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!

6 Comentarii to “Carusel infinit cu jQuery”

  1. Chiar pare a fi simplu si eficient, cel putin din demo. Peste cod n-am timp (a se citi chef) sa ma uit acum, dar poate intr-o zi il voi folosi si voi intra in detalii.
    Keep up the good work!

  2. Staicu Ionuț-Bogdan

    @Flavius, mă bucur că-ți place. Spor la folosit :D

  3. Si daca de exemplu as vrea sa pun un link pe fiecare imagine, link care ar face reload la pagina, as putea sa blochez caruselul in dreptul imaginii respective?

  4. Staicu Ionuț-Bogdan

    @Cosmin: nu am avut nevoie de așa ceva. Dacă va fi cazul, voi actualiza codul. :)

  5. Staicu Ionuț-Bogdan

    @Cosmin: folosește scriptul ăsta ;)

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>