Realizzare uno Slider Nivo con jQuery

Partendo dal post precedentemente realizzato da me, riguardante la realizzazione di un Thumbnail Slider, in questa puntata tratteremo la creazione di uno Slider Nivo, la cui principale caratteristica è quella di avere una transizione grafica, da una immagine alla seguente, con effetto di dissolvenza, giocando sull’opacità degli elementi.

Inoltre, tratteremo la gestione di una navigazione alternativa alle frecce, ossia una navigazione con dei “pallini” che potranno portare la visualizzazione dello slider direttamente all’immagine selezionata.

Struttura Html di base

L’html del nostro Slider Nivo, sarà praticamente il medesimo di quello realizzato per il precedente slider.

<section class="nivo-slider">
<div class="navi"></div>
 <a class="prev" href="javascript:void(0);"></a>
 <a class="next" href="javascript:void(0);"></a>
<div id="nivo"></div>
</section>

Eccezione fatta per l’aggiunta di un div class=”navi” che sarà il contenitore dei nostri pallini per navigare rapidamente tra le immagini.

Proprietà Css necessarie

Le regole css del nostro Slider Nivo serviranno per posizionare il nostro navigatore a pallini e per posizionare le nostre immagini o i nostri elementi uno sopra l’altro in modo tale da poter permettere, con l’animazione javascript, il fadein e il fadeout dei nostri elementi.

Il contenitore principale sarà la section class=”nivo-slider” che sarà il contenitore di tutti gli elementi: slider, frecce e navigazione a pallini.

.nivo-slider{
   position:relative;
   margin: 30px auto 0;
   width:620px;
   height: 460px;
}

Al suo interno avremmo appunto, le frecce a class=”prev” e a class=”next” che saranno posizionate in modo assoluto rispetto al contenitore.

.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;
}

Lo slider div id=”nivo” verrà posizionato in modo relativo, e a sua volta conterrà gli elementi posizionati in modo assoluto rispetto ad esso. Essi saranno gli elementi su cui verrà applicata l’animazione javascript. Questi ultimi, saranno posizionati uno sopra l’altro, top:0; left:0; avranno dimensione fissa e, condizione importante per il corretto funzionamento, opacity:0;.

#nivo{
   position: relative;
   overflow: hidden;
   width: 620px;
   height: 460px;
}
#nivo .element {
   opacity: 0;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   width: 640px;
   height: 460px;
   zoom: 1;
}

#nivo .slide1 {
   background-image: #4e4e48;
   background-image: linear-gradient(bottom right, #de55d7 0%, #0d9602 100%, #000000 100%);
}
#nivo .slide2 {
   background-image: #6a7259;
   background-image: linear-gradient(top left, #eb622d 0%, #52f5df 100%, #000000 100%);
}
#nivo .slide3 {
   background-image: #70415c;
   background-image: linear-gradient(bottom, #ff2b1f 0%, #5297f5 100%, #000000 100%);
}
#nivo .slide4 {
   background-image: #606088;
   background-image: linear-gradient(left, #fcff99 0%, #2422ff 100%, #000000 100%);
}
#nivo .slide5 {
   background-image: #044a29;
   background-image: linear-gradient(top left, #0cdd7c 0%, #000000 80%, #000000 100%);
}

Per quanto riguarda i pallini, il div class=”navi” avrà posizione assoluta rispetto alla section class=”nivo-slider”. In questo caso li ho posizionati in basso a destra sotto gli elementi, e li ho anche affiancati utilizzando float:left;.

.navi{ position:absolute; top:auto; bottom:-20px; z-index:300; right:0; }
.navi a{
   display:block;
   background:#000;
   border-radius:10px;
   border:none;
   width:11px;
   height:11px;
   text-indent:-999em;
   overflow:hidden;
   margin:8px 5px 0 0;
   cursor:pointer;
   float:left;
}
.navi a.active, .navi a:hover{ background-color:red; }

I pallini avranno come stato active e hover un colore differente. Per stato active si intende quando il codice javascript assegna al pallino corrente una classe “.active”.

Codice Javascript/jQuery

Analizziamo ora il codice realizzato per ottenere il nostro Slider Nivo. Nella prima parte dichiariamo le variabili che ci serviranno nel corso del nostro script, tra cui il numero degli elementi, una variabile contatore e una variabile per prevenire molteplici istanze di click.

var nEle  = $('#nivo .element').size(),
       i       = 1,
       counter = 1,
       squareT = 0,
       move    = false;

Prima di analizzare le funzioni facciamo un salto al codice che parte dal commento “//start and autoplay”, poiché alcune di queste istruzioni ci serviranno per capire poi il funzionamento delle funzioni definite.

Le condizioni necessarie per il funzionamento dello slider, sono posizionate sotto appunto questo commento. Esse consistono nello stampare un pallino per ogni elemento dello Slider Nivo tramite un “.each”, (nella quale assegneremo anche un attributo html rel=”” con valore crescente che ci servirà successivamente per la navigazione a pallini), mettere ad opacità a 0 tutti gli elementi, mettere il primo elemento a opacità 1 e aggiungere la classe “.active” al primo pallino.

//start and autoplay
   $('#nivo .element').each(function() {
       $('.nivo-slider .navi').append('');
       i = i+1;
   });
   $('#nivo .element').css({ opacity:"0", filter:"alpha(opacity=0)"});
   $('#nivo .element:first-child').css({ opacity:"1", filter:"alpha(opacity=100)"});
   $('.nivo-slider .navi a:first-child').addClass('active');

Successivamente compare l’autoplay che effettuerà il fading a intervalli di 5 secondi, gli eventi sulle frecce che applicheranno fading o fadingReverse al click, e le istruzioni da eseguire al momento del click su di un pallino. Per questi ultimi la prima istruzione, preleverà tramite un parseInt il valore dell’attributo rel=”” che ci servirà nella funzione fadingSquares per poter selezionare uno specifico elemento della lista.

var autoplayFade = setInterval(function() {
       fading();
   },5000);

   $('.prev').click(function() {
       fadingReverse();
       clearInterval(autoplayFade);
   });

   $('.next').click(function() {
       fading();
       clearInterval(autoplayFade);
   });

   $('.navi a').click(function() {
       squareT = parseInt(($(this).attr('rel')));
       fadingSquares();
       clearInterval(autoplayFade);
   });

Dopodiché definiamo le istruzioni per effettuare il movimento di Fading normale, Fading Reverse (quando clicchiamo sulla freccia “prev”), e il Fading per la navigazione a pallini. La prima funzione di Fading non farà nient’altro che, il fadeout sull’immagine corrente, ovvero porterà l’opacità dell’elemento da 1 a 0, toglierà la classe “.active” al pallino corrente e la metterà a quello successivo, e infine creerà la transizione di opacità inversa sull’elemento che segue (da 0 a 1). Tutto questo verrà effettuato mentre la variabile move passerà da false a true, questo per non incorrere in molteplici istanze di click da parte dell’utente.

fading  = function() {
           if (move) { return false; }

           move = true;
           $('#nivo').find('.element:nth-child(' + counter + ')').animate({
               opacity:'0'
           }, 800);
           $('.nivo-slider .navi').find('a:nth-child(' + counter + ')').removeClass('active');
           if ( counter == nEle ) {
               counter = 0;
           }
           $('.nivo-slider .navi').find('a:nth-child(' + ( counter + 1 ) + ')').addClass('active');
           $('#nivo').find('.element:nth-child(' + ( counter + 1 ) + ')').animate({
                   opacity:'1'
               }, 800, function() {
                   move = false;
               }
           );
           counter = counter + 1;
       }

La seconda funzione di Fading (reverse) effettettuerà esattamente la stessa animazione precedente al contrario. Quindi avremo che l’elemento attuale andrà sempre in fadeout mentre sarà l’elemento che precede ad effettuare il fadein. Entrambe le funzioni sono accomunate dal fatto che, quando la variabile counter arriverà al limite superiore o al limite inferiore, la posizione verrà riportata all’elemento iniziale o all’elemento in coda, a seconda se si tratti della funzione di Fading normale o reverse.

fadingReverse = function() {
           if (move) { return false; }

           move = true;
           $('#nivo').find('.element:nth-child(' + counter + ')').animate({
               opacity:'0'
           }, 800);
           $('.nivo-slider .navi').find('a:nth-child(' + counter + ')').removeClass('active');
           if ( counter == 1 ) {
               counter = nEle+1;
           }
           $('.nivo-slider .navi').find('a:nth-child(' + ( counter - 1 ) + ')').addClass('active');
           $('#nivo').find('.element:nth-child(' + ( counter - 1 ) + ')').animate({
                   opacity:'1'
               }, 800, function() {
                   move = false;
               }
           );
           counter = counter-1;
       }

La funzione fadingSquares non farà nient’altro che ricevere la posizione del pallino su cui abbiamo cliccato, effettuare il fadeout dell’elemento attuale, spostarsi alla posizione ricevuta dal pallino ed effettuare il fadein su quell’elemento.

fadingSquares  = function() {
           if (move) { return false; }

           move = true;
           $('#nivo').find('.element:nth-child(' + counter + ')').animate({
               opacity:'0'
           }, 800);
           $('.nivo-slider .navi').find('a:nth-child(' + counter + ')').removeClass('active');
           counter = squareT;
           $('.nivo-slider .navi').find('a:nth-child(' + counter + ')').addClass('active');
           $('#nivo').find('.element:nth-child(' + counter + ')').animate({
                   opacity:'1'
               }, 800, function() {
                   move = false;
               }
           );
       };

Ecco una demo del Nivo Slider realizzata da me.

Lascia un commento

Tutti i campi sono obbligatori.
L'indirizzo email non verrà pubblicato

 

Commenti

  1. avatarGiada

    Ma dove devo inserire il link delle foto che voglio inserire nello slide!?

  2. avatarMatteo Melillo Autore

    Ciao Giada,

    innanzitutto ti ringrazio del tuo interessamento verso questo post.

    Ti spiego brevemente come fare: se apri la mia demo a questo link http://jsfiddle.net/matteomelillo/GtYjm/13/
    nella parte HTML in alto a sinistra puoi vedere che nel tag div id=”nivo” sono contenuti alcuni div class=”element”.

    Sostituisci questi ultimi con le tue immagini. Quindi al posto dei div class=”element”, ti basterà inserire le immagini sempre con classe element (<img class="element" ecc..).

    Altra soluzione può essere mantenere questi div e inserire al suo interno una immagine per ognuno.

    Spero di essermi spiegato, in ogni caso rimango a completa disposizione per ulteriori dubbi o chiarimenti.

  3. Pingback: Slider Nivo con Mootools ed ereditarietà oggetti - blog.artera.net

  4. avatarLaura Copelli

    Ciao Matteo, io vorrei usare lo stesso effetto di SLiceInLeft ma verso destra.
    Tu mi dirai: usa SlideInRight.

    No, perchè l’effetto è diverso.
    Infatti nel primo caso le immagini scrollano per intero da dx verso sx, mentre nel secondo caso la foto non si sposta ma appare da dx verso sx tramite una maschera.

    La mia domanda è: posso avere un effetto con l’immagine che da sx si sposta a dx per intero come accade in SlideInLeft?

    Grazie se riuscirai a capire ^_^

  5. avatarMatteo Melillo Autore

    Ciao Laura,

    ti ringrazio per l’interessamento verso il mio post!

    Ho verificato sia il funzionamento di questo slider, sia il funzionamento dello slider con le thumbnails, ovvero quello che effettua lo slideIn e lo slideOut degli elementi.

    Nel caso del Nivo (fadeIn e fadeOut) l’effetto è medesimo, ovvero il passaggio tra un elemento e l’altro avviene tramite un effetto di dissolvenza dell’immagine e avviene allo stesso modo sia se si va verso destra, sia verso sinistra.
    Stessa cosa, per lo slider Thumbnail (slideIn slideOut) l’effetto è il medesimo in ambo le direzioni, ovvero lo spostamento dell’elemento da sinistra verso destra o viceversa.

    Se ho capito bene, all’esempio che esponi tu, sembra quasi che lo slider si comporti per un verso come Nivo e nel verso opposto come lo slider Thumbnail. Questa cosa a me non capita.

    Se invece ho capito male ti chiedo magari di farmi visualizzare un esempio del tuo caso specifico, oppure anche un esempio che hai visto online che ti possa andare bene, cosicché possa verificare quale risultato finale vuoi ottenere.

    Grazie,

    Matteo

  6. avatarLaura Copelli

    Ciao Matteo, cerco di essere più chiara ^_^
    A questo link:

    http://siteshowcase.weebly.com/nivo-slider-slide-in-left.html

    troverai il pulsante SLIDE IN LEFT.

    È il movimento che serve a me, con la foto che da destra scivola verso il centro.
    Ma a me serve che il movimento vada a da sinistra a destra.

    Sempre a questo link esiste il pulsante SLIDE IN RIGHT ma non ha lo stesso effetto: l’immagine è ferma e una maschera la mostra da sx a dx.

    Io ho bisogno che la foto si sposti fisicamente, tutta intera, da sinistra verso destra.

    Puoi aiutarmi?
    Grazie se riuscirai :)

  7. avatarMatteo Melillo Autore

    Ciao Laura,

    credo di aver capito che effetto vuoi ottenere.

    Se lo slider di cui hai bisogno deve avere questo tipo di animazione (vedi seguente link: http://easingslider.com ), allora ti anticipo

    che per esaudire la tua richiesta, scriverò a breve un nuovo post del blog per essere il più esaustivo possibile.

    Questo anche perché non si tratta di una modifica veloce da fare allo slider di questo post, bensì di un nuovo algoritmo.

    Fammi sapere se l’esempio che ti ho fornito è proprio ciò che cerchi.

    Grazie e a presto,

    Matteo

  8. avatarGerado

    Ciao Matteo, sono un appassionato di proggrammazione. Dopo aver maturato HTML e CSS sto iniziando a studiare java script e le librerie di jquery. Ho provato a creare una semplice slide ma non funziona; potresti aiutarmi a capire il perché?

  9. avatarMatteo Melillo Autore

    Ciao Gerardo,

    certamente, ti aiuto molto volentieri. In particolare che problema hai riscontrato?
    Posso chiederti magari di utilizzare: http://jsfiddle.net/ per poter vedere che codice HTML, CSS e Javascript/jQuery hai utilizzato?

    Grazie e a presto,

    Matteo

  10. avatarGerardo

    Grazie Matteo per aver risposto al mio problema e scusami se ti do del tu. Sono alle prime armi con javascript e con jquery e per questo ti chiedo un po’ di pazienza nel aiutarmi. Per inviarti il codice nel link che mi hai scritto come devo fare? E’la prima volta che lo uso. Se è possibile potresti dirmi come devo fare. Ti ringrazio anticipatamente. Grazie a presto.

  11. avatarMatteo Melillo Autore

    Ciao Gerardo,

    diamoci tranquillamente del tu!
    Allora ti spiego per passi come utilizzare JsFiddle.

    – vai a questo link http://jsfiddle.net/

    – Per prima cosa includiamo jQuery come libreria Javascript, cliccando sulla select presente in alto a sinistra. Attualmente vedrai No-Library (pure JS)

    – Seleziona jQuery 1.9.1

    – In questo layout sono presenti 4 finestre:

    La prima in alto a sinistra è la porzione nella quale dovrai copiare e incollare il tuo codice HTML
    Quella in alto a destra è per il CSS
    La finestra in basso a sinistra per il Javascript
    Infine l’ultima finestra in basso a destra, è il risultato di ciò che fai eseguire a Js Fiddle.

    – Ciò che devi fare è:
    copiare ed incollare l’HTML, il CSS e il Javascript nelle parti corrispondenti
    cliccare in alto a sinistra sul pulsante Save

    – Il tasto Save, una volta effettuato il primo salvataggio, diventerà Update. Cliccandoci sopra aggiornerai il contenuto.

    – Clicca sul pulsante Run, per eseguire il codice

    A questo punto mi devi inviare il link che ottieni dopo aver salvato ed eseguito il codice.

    Dovrebbe uscirti un qualcosa tipo http://jsfiddle.net/52Hkb (url di jsfiddle + un codice alfanumerico)

    Spero di essere stato esaustivo.

    A presto,

    Matteo

  12. avatarGerardo

    Ciao Matteo,
    ti ringrazio, innanzitutto, per avermi indicato la procedura di jsfiddle. Sei stato chiarissimo nella spiegazione. La cosa che non ho capito come inserire le immagini per farti vedere il risultato. Cosa non ho inserito? Lo scopo della slide è quello di far girare le immagine da sole da destra verso sinistra. Non so perchè a me non funziona (uso chrome). Questo è il link che mi è uscito http://jsfiddle.net/f8pSG/1/. Spero di essere chiaro anche io nella spiegazione. Poi la slide la vorrei aggiustarla facendo mouovere insiem epulsanti e immagini da sole(come quella tua).
    Grazie per la disponibilità

  13. avatarMatteo

    ciao sto usando quasto slider ma ho incontrato una difficoltà inaspettata (almeno per la mia poca esperienza)
    in pratica ho la necessità di crare più slider uno sotto altro nella stella pagina.
    cosi ho pensato di copiare il del primo slider funzionante e incollarlo sotto
    in pratica creo i necessari e impaginazione corretta ma le foto si caricano solo nel primo div del codice.
    i successivi appare icona caricamento e basta. cosa non va?

  14. avatarAndrea

    Ciao tutti, sto adoperando il js nivo-slider per gestire un effetto slider su un mi progetto web. Assicuratomi che tutto funzionasse,o recentemente messo on-line l’effetto con tutto il necessario ma ahimé quanto scrupolosamente provato non lo vedo sul sul sito pubblicato, benché una settimana prima funzionava …. Avendo successivamente apportato delle modiche al file “portante”, nel senso che ho popolato la galleria con un 150 foto, è possibile che nivo-slider non riesca a supportarle per l’effetto ? Grazie a chi i volesse rispondere, giusto per chiarirmi le idee, è abbastanza urgente !!