Negli ultimi due mesi credo di aver realizzato almeno una ventina di slider di immagini o slideshow su svariati siti. Da slideshow "fullscreen" a gallerie di thumbnails, il tutto ovviamente responsive. Il problema a cui vado incontro è che ogni cliente ha la sue specifica richiesta, e uno slideshow non è mai uguale al precedente che ho fatto.
Qualcuno vuole una immagine sola per slide, a pieno finestra, qualcuno vuole delle slide più complesse con testo e magari elementi interattivi, qualcuno vuole una galleria che mostri tre immagini alla volta, qualcuno vuole che le slide scorrano in verticale, qualcuno vuole che le slide siano una lista circolare (dopo l'ultima slide ritorna la prima), altri lineare, etc. etc.
In passato, a seconda della richiesta specifica, andavo a cercare un plugin specifico adatto al problema da risolvere o, se non lo trovavo in tempi brevi, mi scrivevo da solo da zero un plugin che facesse esattamente ciò che mi serviva. Entrambe le soluzioni però a lungo termine costano un bel po' di tempo e qualche frustrazione ("Ma dovevano proprio chiedermi questa singola cosa che il plugin dell'ultima volta non fa?").
Slickslider, un solo plugin per gestire ogni tipo di slideshow!
Per fortuna di recente mi sono imbattuto in slick, un plugin jQuery per creare slideshow che letteralmente spazza via qualsiasi altro script usato in passato. Perfettamente responsive e pieno di opzioni configurabili, slick ha coperto la quasi totalità delle necessità che ho avuto con solo una corretta configurazione delle opzioni.
Per i pochi casi più particolari non è stato comunque un problema, poiché il plugin è molto developer-friendly e mette a disposizione tutta una serie di metodi per controllare gli slideshow via codice dopo la creazione, e degli eventi per rispondere alle interazioni sullo slider da parte dell'utente.
Uno slideshow orizzontale
Realizzare uno slider di immagini "canonico" è molto semplice, il plugin si aspetta che gli indichiamo un elemento del DOM che "contenga" le slide. I figli diretti dell'elemento che indichiamo sono le slide.
Ad esempio possiamo avere il seguente codice HTML
<div class="article_content_slider_container"> <div class="article_content_slider_slide"><img src="slide1.jpg" /></div> <div class="article_content_slider_slide"><img src="slide2.jpg" /></div> <div class="article_content_slider_slide"><img src="slide3.jpg" /></div> <div class="article_content_slider_slide"><img src="slide4.jpg" /></div> <div class="article_content_slider_slide"><img src="slide5.jpg" /></div> </div>
Per trasformarlo in uno slideshow richiamiamo slick con poche opzioni:
$('.article_content_slider_container').slick({
slidesToShow: 1,
infinite: true,
appendArrows: jQuery('.article_content_slider_arrows')
});
Il risultato è uno slideshow a rotazione circolare orizzontale. In questo esempio abbiamo usato anche un'opzione particolare ovvero appendArrows, che semplicemente ci consente di indicare a slick un elemento della pagina all'interno del quale mettere i bottoni per scorrere le slide avanti e indietro. Volendo avremmo potuto scegliere di non mettere questi bottoni ma i classici link alle singole slide, sotto forma di cerchietti, quadratini o quel che più ci piace. Oppure avremmo potuto evitare di mettere qualsiasi cosa, visto che le slide si possono scorrere anche semplicemente trascinandole.
Uno slideshow verticale... e qualcosa in più!
Per provare qualche altra opzione, creiamo uno slideshow questa volta verticale, con dei bottoni "indice" per muoverci direttamente alla slide che vogliamo. Visto che ci siamo proviamo anche ad ascoltare un evento, nello specifico afterChange che ci dice quando ci siamo spostati su una nuova slide, per non complicare le cose ci limitiamo a stampare il numero della slide su cui ci siamo spostati.
Il codice html è identico al precedente, aggiungiamo solo un DIV in cui stampare i nostri messaggi
<div class="article_content_slider_container2">
<div class="article_content_slider_slide"><img src="slide1.jpg" /></div>
<div class="article_content_slider_slide"><img src="slide2.jpg" /></div>
<div class="article_content_slider_slide"><img src="slide3.jpg" /></div>
<div class="article_content_slider_slide"><img src="slide4.jpg" /></div>
<div class="article_content_slider_slide"><img src="slide5.jpg" /></div>
</div>
<div class="article_content_slider_arrows2"></div>
<div class="article_content_slider_events2" style="color: #e73420; font-weight: bold;">Stai guardando la slide 1</div>
Il codice per il setting iniziale è solo leggermente più lungo del precedente esempio, e in più abbiamo aggiunto la gestione dell'evento afterChange
$('.article_content_slider_container2').slick({
slidesToShow: 1,
infinite: false,
arrows: false,
dots: true,
vertical: true,
verticalSwiping: true,
appendDots: jQuery('.article_content_slider_arrows2'),
});
$('.article_content_slider_container2').on('afterChange', function(event, slick, currentSlide){
$('.article_content_slider_events2').text('Stai guardando la slide ' + (currentSlide+1));
});
Utilizzare questo plugin mi ha salvato parecchie ore di lavoro in momenti critici. Tenendo conto che in un modo o nell'altro ogni sito ha un qualche slideshow (ALMENO uno!) credo che mi salverà un altro bel po' di ore anche in futuro. Consiglio a tutti di segnarselo e metterlo nella propria "cassetta degli attrezzi" del frontend developer.