E’ disponibile la versione 2.0 aggiornata con nuove funzionalità. Tutti i bugs relativi allo spostamento sono stati risolti: jQuery News Slider v2.0

Gleenk spotSlider è uno slider realizzato in jQuery nato principalmente come carousel per lo scorrimento di News. Questo script non è stato, volutamente, convertito in un plugin in modo da poter essere trattato come puro codice, così come avviene per tutti i tutorial di questo sito, e rimanere quindi accessibile e liberamente modificabile da chiunque.

Slider per le news ma non solo

Questo script permette di gestire dei pannelli a scorrimento, idealmente contenenti delle news. Nulla vieta però di cambiarne la funzionalità a slider di immagini o di contenuti di qualsiasi tipo. Lo script infatti si limita “semplicemente” a far scorrere delle finestre, indipendentemente dal contenuto. Andiamo però a vedere in sintesi, come ogni altro tutorial, quali sono gli elementi principali a cui porre attenzione per implementare correttamente lo script.

La struttura html

La struttura di base utilizzata consiste di 2 div contenitori, uno più esterno che svolge la funzione di contenere tutti gli elementi dello slider (incluse frecce e pallini di navigazione) ed uno interno contenente gli elementi di lista corrispondenti ai pannelli di navigazione. Il markup html si mostra così:

<div id="news_block">
	<div class="news_slider">
		<ul class="slides">
			<li><!--contenente i 4 pannelli visibili-->
				<div class="news_box"></div>
				<div class="news_box"></div>
				<div class="news_box"></div>
				<div class="news_box"></div>
			</li>
			<li><!--contenente i 4 pannelli visibili-->
				<div class="news_box"></div>
				<div class="news_box"></div>
				<div class="news_box"></div>
				<div class="news_box"></div>
			</li>
		</ul>
	</div>
	<!--Pallini indicatori della slide-->
	<ul class="news_slider-spots"></ul>

	<!--Frecce direzionali-->
	<div class="news_slider-left"></div>
	<div class="news_slider-right"></div>
</div>

CSS e grafica

Il meccanismo “grafico” utilizzato per realizzare il nostro slider jQuery si basa sul principio delle maschere. Abbiamo infatti un contenitore fisso esterno “maschera” (con proprietà overflow:hidden) al cui interno “scorre” la nostra lista. L’unica attenzione da porre è quella di utilizzare elementi fissi in larghezza per poterne calcolare poi facilmente le dimensioni con jquery. Ad ogni modo per quanto riguarda il CSS spazio alla creatività come sempre! Per maggiori dettagli vi rimando alla visualizzazione del codice sorgente dell’esempio.
NB: per pallini e frecce è stata usata la tecnica degli sprites css

jquery.newslider.js

Il cuore dello slider risiede nelle circa 70 righe javascript che si trovano nel file jquery.newslider.js. Analizzarle una ad una richiederebbe molte pagine di descrizione, perciò ho deciso di soffermarmi a spiegare rapidamente i punti più importanti per comprenderne il funzionamento ed imparare le tecniche utilizzate, lasciando a voi lo studio integrale. Per qualsiasi chiarimento non esitate a domandare delucidazioni!

Calcoli dinamici delle dimensioni

Per non essere vincolati dal css la larghezza dell’ul contenente lo slider e dei li viene calcolata dinamicamente in modo che non si abbiano problemi dovuti alla grandezza degli elementi.

var numeroLiPoint = $(".news_slider li").size();
	var largLi = $(".news_slider li").width(); 
	var largLiTot = numeroLiPoint*largLi;
	var termina = largLiTot-largLi;

	//larghezza dinamica dell'ul
	var boxUl = $(".news_slider ul.slides");
	boxUl.css("width",largLiTot);

Animazione e prevenzioni click multipli

Per animare lo slider si è utilizzata la funzione animate() che offre numerose possibilità, tra le più importanti la possibilità di eseguire azioni (callback) una volta che l’animazione è terminata. Nel nostro caso in callback viene ripristinata la funzione di click, disattivata in fase di animazione per prevenire click multipli. A tal proposito vi rimando, per una spiegazione dettagliata, alla lettura dell’articolo jQuery bind e unbind, come prevenire click multipli.

$('.news_slider-right').bind('click', moveBox1);
	function moveBox1(e1) {
	e1.preventDefault();
		$('.news_slider-right').unbind();
		if(boxUl.css("left")!=-termina+"px"){
			boxUl.stop().animate({left:"-="+largLi+"px"}, {
			duration: 500,
			complete: function() {
				$('.news_slider-right').bind('click', moveBox1);
				palliniInversa();
			}

		  });
		}
		else {
			$('.news_slider-right').bind('click', moveBox1);
		}
	}

Creazione punti “spot” di navigazione

Pallini, o meglio “spots”. Da qui deriva il nome dato simbolicamente allo slider realizzato; attraverso i pallini infatti è possibile identificare univocamente un blocco dello slider ed arrivarci rapidamente. La funzione di creazione non fa altro che, utilizzando un ciclo for, calcolare il numero di li e creare un pallino per ognuno di essi. Il calcolo dinamico successivo permette di centrare il contenitore di questi rispetto allo slider.

for(i=0; i");
	}
	//calcolo dinamico larghezza contenitore pallini
	var largPallini = $(".news_slider-spots li").width();
	$(".news_slider-spots").width(largPallini*numeroLiPoint);

	$(".news_slider-spots li:eq(0)").addClass("active");

Al click sullo spot, come appena detto, ci si sposta al li corrispondente, utilizzando la funzione di jQuery index() per rendere univoca l’azione.

//spostamento dello slider al click sul pallino
	$(".news_slider-spots li").click(function(){
		$(".news_slider-spots li").removeClass("active");
		$(this).addClass("active");
		var indicePallini = $(".news_slider-spots li").index(this);
		boxUl.stop().animate({left:0-(indicePallini*largLi)}, {duration: 500});

		//sicurezza
		$('.news_slider-left').bind('click', moveBox2);
		$('.news_slider-right').bind('click', moveBox1);
	});

Infine, attraverso la funzione palliniInversa() facciamo in modo che quando lo slider viene spostato grazie alle frecce di navigazione, si attivi lo spot corrispondente al pannello visualizzato:

function palliniInversa() {
		var boxLeft = parseInt(boxUl.css("left"));
		var indexPal = parseInt(-boxLeft/largLi);
		$(".news_slider-spots li").removeClass("active");
		$(".news_slider-spots li").eq(indexPal).addClass("active");
	}

Note d’uso, ringraziamenti e conclusioni

Come potete vedere lo script è concettualmente molto semplice ed utilizza funzioni relativamente semplici, tuttavia strutturato in questo modo, permette un’elasticità molto alta. E’ infatti fatto in modo che si possa facilmente adattare a diverse situazioni d’uso; la semplicità inoltre garantisce che non vi siano conflitti con altri script eventualmente utilizzati. Per finire ci tengo a sottolineare che è garantito il supporto su tutti i browser.

Come potrete notare ho deciso di rilasciare questo script-tutorial sotto licenza CC Non Commerciale. Sarei lieto di poter vedere i siti in cui implementerete lo script e condividerli con tutti i lettori. Infine, volevo porgere un ringraziamento particolare a Francesco Finotto per aver testato lo script più e più volte affinchè giungesse ad una versione stabile e senza bug!

Se qualcuno di voi avesse domande o curiosità non esiti a chiedere!