A gentile richiesta di una nostra lettrice, vi proporrò uno slider con animazione SlideInLeft/SlideInRight, che consiste nel far comparire l’elemento successivo o precedente rispettivamente da destra verso sinistra o da sinistra verso destra, facendo “scivolare” i nuovi elementi sopra a quello attuale. A parole può sembrare un’animazione complessa, ma vedrete subito che si tratta di un effetto semplice e allo stesso tempo efficace.
Markup HTML
La struttura HTML dello slider è esattamente la stessa dello slider nivo precedentemente realizzato da me, eccezion fatta per le immagini che ho inserito all’interno dei div con classe element per rendere l’effetto dello slider più chiaro.
[code type=”markup”]
«
»
[/code]
Proprietà CSS utilizzate
Lo slider avrà una struttura molto simile a quella di uno Slider Nivo, infatti avrà un wrapper con dimensioni fisse, che conterrà tutti i nostri elementi, un sistema di navigazione a frecce e un sistema di navigazione a pallini.
Il wrapper avrà le seguenti regole Css:
[code type=”css”]
#nivo{
position: relative;
overflow: hidden;
width: 620px;
height: 460px;
}
[/code]
Il wrapper più esterno, ovvero il contenitore di tutta la struttura, avrà le stesse regole principali. Sostanzialmente entrambi avranno dimensioni fisse, position:relative e overflow hidden.
Queste regole sono necessarie per poter avere i figli, ovvero i div con classe element, posizionati in modo assoluto rispetto al padre, e quindi sovrapposti uno all’altro. Per far ciò bisogna assegnare agli elementi position:absolute, left e right ad “auto” e dimensioni fisse. Assegneremo, inoltre, anche un valore di z-index sempre pari ad “auto” che ci verrà utile nella realizzazione dello script per far sì che gli elementi che compaiono, a cui verrà assegnato tramite javascript z-index pari a 1, stiano sempre ad un livello superiore rispetto a quello dell’elemento che verrà nascosto. Mettiamo anche la regola display:none, poiché ogni elemento nello stato iniziale, non sarà visibile, tranne il primo della lista che però visualizzeremo tramite il codice Js del nostro Slider.
[code type=”css”]
#nivo .element {
display:none;
position: absolute;
top: 0;
right: auto;
left: auto;
width: 620px;
height: 460px;
zoom: 1;
z-index:auto;
}
[/code]
Infine abbiamo i nostri elementi di navigazione, che sono i medesimi di quelli presenti nello Slider Nivo, che serviranno per poter scorrere le nostre immagini.
[code type=”css”]
.prev{
position: absolute;
top: 185px;
left: -40px;
cursor: pointer;
color:#000;
font-size:50px;
line-height:normal;
text-decoration:none;
}
.next{
position: absolute;
top: 185px;
line-height:normal;
right: -40px;
cursor: pointer;
color:#000;
font-size:50px;
text-decoration:none;
}
.navigation{ position:absolute; top:auto; bottom:-20px; z-index:300; right:0; }
.navigation a{
display:block;
background:#000;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
border:none;
width:11px;
height:11px;
text-indent:-999em;
overflow:hidden;
margin:8px 5px 0 0;
cursor:pointer;
float:left;
}
.navigation a.active , .navigation a:hover { background-color:red; }
[/code]
Codice Javascript/jQuery
Veniamo alla parte più interessante di questo intervento: per prima cosa dichiariamo le variabili che ci serviranno nel corso del nostro script.
[code type=”javascript”]
var
sliderElements = $(‘#nivo’).find(‘.element’),
nEle = sliderElements.length,
navigation = $(‘.navigation’),
i = 0,
counter = 0,
speed = 800,
delta = $(‘#nivo .element’).width(),
move = false;
[/code]
Ci servirà la lista di elementi sottoforma di array, il numero degli elementi, la velocità in ms, che possiamo modificare a nostro piacimento e secondo le nostre esigenze e la dimensione di un singolo elemento che ci servirà per sapere di quanto dovrà spostarsi un elemento per uscire dalla nostra area di visualizzazione. Infine alcune variabili numeriche e la variabile move che ci servirà per poter prevenire molteplici istanze di movimento del nostro slider.
Per questo slider con animazione SlideInLeft/SlideInRight sono riuscito ad ottimizzare le istruzioni e a definire una sola funzione che si occuperà di tutti i possibili movimenti, e una piccola hash che mi sarà utile per poter effettuare alcune oprazioni.
Quest’ultima, operation, ci servirà appunto per poter addizionare o sottrarre due numeri, passando come parametro in ingresso l’operatore + o -.
[code type=”javascript”]
operation = {
‘+’: function(a, b) { return a + b },
‘-‘: function(a, b) { return a – b },
}
[/code]
Questa hash ci verrà molto utile all’interno delle operazioni di movimento poiché ci darà la possibilità di modificare il contatore dell’elemento attuale, counter, in base al tipo di movimento che stiamo effettuando.
Spiegherò adesso la funzione sliding, vero e proprio cuore di questo script Javascript/jQuery.
Per prima cosa, essa avrà come parametri in ingresso tre valori: direction, operator e nextCounter. Il parametro direction, sarà la direzione nella quale l’animazione deve svolgersi, potrà essere quindi left o right. Il parametro operatore, ci servirà per dire alla hash decrementare o aumentare il valore del contatore (+ o -). Infine, nextCounter, sarà l’unico parametro non richiesto, poiché verrà passato soltanto quando clicchiamo su uno dei pallini dello slideshow.
[code type=”javascript”]
sliding = function(direction, operator, nextCounter) {
//codice
}
[/code]
Passo successivo è quello di prevenire molteplici istanze di click, e per fare ciò basterà questo controllo:
[code type=”javascript”]
if (move) { return false; }
move = true;
[/code]
L’istruzione seguente assegnerà alcune proprietà css all’elemento per poter azzerare la sua posizione e in particolare, portando il valore dello z-index a 10, saremo sicuri che l’elemento attuale rimanga a un livello inferiore rispetto a quello che comparirà. Rimuoviamo, inoltre, la classe active al pallino.
[code type=”javascript”]
$(sliderElements[counter]).css({‘display’: ‘block’, direction: ‘0’, ‘z-index’: ’10’, left : ‘auto’, right: ‘auto’ });
$(navElements[counter]).removeClass(‘active’);
[/code]
A questo punto dichiariamo e assegnamo ad un hash, il valore delta ovvero la posizione da cui dovrà partire il nostro elemento successivo o precedente. Questo sarà possibile grazie al passaggio di parametri che effettueremo al momento della chiamata della funzione sliding. Sostanzialmente, se l’immagine dovrà comparire da destra verso sinistra, allora assegneremo al left il valore delta oppure, in caso contrario, delta sarà il valore del right. Il senso opposto dell’animazione rimarrà auto in modo tale da non influire sullo scorrimento dell’immagine, che altrimenti potrebbe bloccare lo sliding dell’elemento.
[code type=”javascript”]
var hash = {}
hash[direction] = delta;
[/code]
Se abbiamo passato alla funzione sliding il valore nextCounter, a questo punto lo assegneremo a counter. Questa parte di codice ci servirà nel caso in cui scateneremo l’animazione attraverso il click su un pallino. Dopodiché controlleremo se siamo posizionati all’inizio o alla fine della lista e riporteremo il valore di counter a 0 o a nEle a seconda del caso.
[code type=”javascript”]
if ( nextCounter != undefined )
counter = nextCounter;
if ( direction == ‘left’ && counter == nEle – 1 )
counter = – 1;
else if ( direction == ‘right’ && counter == 0 )
counter = nEle;
[/code]
Step successivo assegnamo al pallino seguente la classe active e assegnamo all’immagine successiva la posizione da cui deve partire, passando al metodo css() di jQuery la nostra hash.
[code type=”javascript”]
$(navElements[operation[operator](counter, 1)]).addClass(‘active’);
$(sliderElements[operation[operator](counter, 1)]).css(hash);
[/code]
Qui troviamo anche il primo caso in cui la hash operation() entra in gioco. Semplicemente in base al parametro operator che noi passeremo alla nostra hash, esso sottrarrà o addizionerà a counter il valore 1, in modo da posizionare il contatore all’elemento precedente o successivo a seconda della direzione in cui si sta muovendo lo slider.
Ora è il momento di eseguire l’animazione. Assegnamo alla nostra hash valore 0, ovvero il valore che la direzione dovrà raggiungere tramite l’animazione, diamo display:block e z-index:10 all’immagine che dovrà comparire e utilizziamo il metodo jQuery animate() per effettuare lo sliding.
[code type=”javascript”]
hash[direction] = 0;
$(sliderElements[operation[operator](counter, 1)]).css({‘display’: ‘block’, ‘z-index’: ’10’ });
$(sliderElements[operation[operator](counter, 1)]).animate(hash, speed, function() {
move = false;
$(sliderElements).css({‘display’: ‘none’, ‘z-index’: ‘auto’ });
$(this).css({display: ‘block’, right : ‘auto’, left : ‘auto’});
counter = operation[operator](counter, 1);
});
[/code]
Al complete di questa funzione rimettiamo move a false in modo tale da poter rendere di nuovo eseguibile la funzione sliding(), nascondiamo l’immagine che esce dalla visualizzazione, azzeriamo la posizione dell’elemento che verrà visualizzato adesso assegnando a left e a right il valore auto, e come ultimo step decrementiamo o incrementiamo il valore di counter.
Si conclude così la funzione sliding(), ora vedremo come utilizzarla all’interno dello script, ma prima eseguiamo delle operazioni necessarie per inizializzare lo slider.
[code type=”javascript”]
$(sliderElements).each(function() {
navigation.append(”);
i = i+1;
});
$(sliderElements[0]).css({ display:”block”, ‘z-index’ : ‘1’, left: 0, right:0 });
$(navElements[0]).addClass(‘active’);
[/code]
Per ogni immagine, inseriamo un pallino con un attributo data-position che servirà per poter ricavare il valore che dovrà assumere counter quando clicchiamo su uno dei pallini. Rendiamo visibile il primo elemento e assegnamo la classe active al primo pallino.
A questo punto analizziamo passo per passo le possibili animazioni/movimenti:
[code type=”javascript”]
var navElements = navigation.find(‘a’);
autoplaySlide = setInterval(function() {
sliding(‘left’,’+’);
},5000);
$(‘.prev’).click(function() {
sliding(‘right’,’-‘);
clearInterval(autoplaySlide);
})
$(‘.next’).click(function() {
sliding(‘left’,”+”);
clearInterval(autoplaySlide);
});
[/code]
Prima operazione sarà quella di salvare in una variabile tutti i pallini creati, dopodiché generiamo un autoplay per lo slider e assegnamo all’evento click() delle frecce lo slide nella direzione corretta. Come potete vedere, alla funzione sliding() vengono passati i parametri ‘left’,’+’ o ‘right’,’-‘.
Ultima fase di questo script riguarderà il click dei nostri pallini.
[code type=”javascript”]
$(navElements).click(function() {
clearInterval(autoplaySlide);
if ( $(this).attr(‘data-position’) > counter )
sliding( ‘left’, “+”, parseInt($(this).attr(‘data-position’)) – 1 );
else if ( $(this).attr(‘data-position’) < counter )
sliding( ‘right’, “-“, parseInt($(this).attr(‘data-position’)) + 1 );
});
[/code]
In questo caso, preleveremo anche il valore dell’attributo data-position, che verrà passato come nextCounter alla nostra funzione sliding().
A questo link la possibilità di visualizzare uno slider con animazione SlideInLeft/SlideInRight d’esempio su jsfiddle.
