Hero Slider, la slideshow jquery full responsive

Sono sempre più frequenti i siti che utilizzano per la presentazione iniziale le slideshow jquery, un modo pratico e pulito per mettere subito in evidenza i contenuti rilevanti di un sito.

Hero Slider è un cursore jQuery che può essere utilizzato in modo efficiente e leggero con diverse opzioni: video, immagini, sfondi, testo per creare una presentazione.

Un sistema leggero che permette di creare una presentazione con tutti gli elementi che riteniamo rilevanti per il sito.

Il full screen e la completa reattività sono mirati a rendere gradevole l’esperienza dell’utente.

Una tocco di raffinatezza la troviamo nelle semplici frecce di navigazione, che diventano tasti interattivi. Essendo possibile inserire contenuti di tipo diverso il cursore diventa intelligente e mostra il tipo di elemento presente nella slide successiva, offrendo all’utente la scelta di saltare la slide. Una scelta intelligente dal momento che non tutti i tipi di contenuti hanno lo stesso impatto su tutti i dispositivi e che permette all’utente di personalizzare l’esperienza della presentazione del sito in modo coinvolgente e senza forzature che potrebbero spingere l’utente a lasciare il sito.

La struttura è molto semplice, con il codice HTML strutturato in 2 elementi principali.

Il primo elemento è una lista non ordinata, ul.cd-hero-slider, che è deputata a contenere le diapositive, il secondo elemento è un div.cd-slider-nav, che ovviamente contiene il cursore per la navigazione e lo span.cd-marker, utilizzato per indicare l’elemento selezionato durante la navigazione.

La struttura della presentazione è abbastanza semplice, con le diapositive che vengono fatte scorrere a destra, al di fuori della finestra. Le funzioni utilizzate per gli scorrimenti sono semplici: translateX (100%), per spostare la diapositiva all’esterno della zona di visualizzazione, alla diapositiva visibile si aggiunge la classe .selected, per visualizzare di nuovo l’elemento nella finestra con un translateX (0), per spostare un elemento facendolo scorrere verso sinistra si utilizza invece la classe .move-left, applicando il translateX (-100%).

Per l’animazione viene usata la CSS3 Transitions, applicata all’elemento .selected e all’elemento .is-moving. Quando viene selezionata una nuova diapositiva, la classe .is-moving viene assegnata alla diapositiva in movimento al di fuori della finestra, mentre la classe .selected viene assegnata alla diapositiva selezionata per la visualizzazione.

Il video che viene utilizzato per una delle diapositive non è inserito direttamente nel codice HTML, ma viene caricato solo se la larghezza del dispositivo lo permette, ovvero se è maggiore di 768px. In questo modo il video non viene caricato sui dispositivi mobili.

L’URL del video viene recuperato solo in caso di visualizzazione: una tecnica che può essere utilizzata anche per le immagini, rendendo molto più leggero il caricamento.

Ovviamente, essendo una slideshow jquery, viene utilizzata jQuery per le funzionalità di spostamento del cursore.