Spesso potremmo avere bisogno di creare un carosello di contenuti (immagini, testo, oppure contenuti misti). Un carosello, o slider, è di fatto uno slider che mostra più di un elemento per volta. Vedremo in questo articolo come inserire sul nostro sito web un carosello, semplicemente aggiungendo una classe css nel nostro Page Builder.
Ecco gli strumenti di cui abbiamo bisogno.
Slick.js
Slick è un carosello leggero e funzionale. Ovviamente è responsive e si adatta facilmente ad ogni situazione grazie ad una documentazione ben fatta, un codice ben scritto. Non ci è mai capitato di avere problemi di alcun tipo utilizzando Slick, che in poco tempo siamo sempre riusciti a personalizzare secondo le nostre esigenze, o dei nostri clienti.
Page Builder di SiteOrigin
I Page Builder sono dei componenti fondamentali nello sviluppo WordPress moderno. I cambi di layout delle varie pagina, la necessità di molti clienti di modificare il contenuto in autonomia, nonché la grande varietà di contenuti che possono essere inseriti in una pagina rendono spesso necessario, se non indispensabile, una interfaccia visuale per modificare i contenuti più velocemente.
Noi di Sito.Express ci affidiamo sempre al Page Builder di SiteOrigin trovandolo di immediato utilizzo, grande flessibilità, affidabilità ed estrema velocità: delle caratteristiche spesso non comuni ad altri page builder che possono dare problemi in caso di aggiornamenti, cambi di tema o aggiunta di plugin.
Il Page Builder di SiteOrigin è inoltre pienamente compatibile con Gutenberg, il nuovo editor di WordPress, con cui si integra perfettamente, riuscendo a sfruttare i miglioramenti in performance che questo editor introduce.
Questa guida si baserà quindi sul Page Builder di SiteOrigin, ma il codice che presenteremo può facilmente essere adattato a qualsiasi altro Page Builder con pochi se non nulli cambiamenti!
Il concetto del nostro carosello
Quello che vogliamo fare è realizzare un carosello istantaneo che si attivi semplicemente aggiungendo una classe CSS all’elemento contenitore. Vediamo l’esempio di seguito:
Nella struttura qui sopra abbiamo una riga del nostro Page Builder che contiene una sola colonna. Dentro questa colonna abbiamo inserito cinque elementi Editor, che saranno i contenuti da far girare nel carosello.
Quello che dobbiamo fare per attivare il nostro carosello è aggiungere una classe CSS all’elemento contenitore: in questo caso la nostra riga.
Nel Page Builder di SiteOrigin, questo è possibile semplicemente cliccando l’icona di modifica della riga (la piccola chiave inglese in alto a destra nell’immagine superiore).
Si aprirà quindi la schermata di modifica della riga, e noi potremmo aggiungere la classe CSS di nostra scelta nel campo “Row Class” sotto la colonna a destra “Row Styles” come nell’esempio che vedete nell’immagine.
Noi abbiamo scelto di chiamare la classe class-carousel, ma questo è un nome arbitrario, che deve solamente essere poi rispettato in tutte le sue referenze (css e javascript).
Una volta che abbiamo salvato la nostra struttura, non dobbiamo fare niente altro: ci serve un modo veloce per realizzare un carosello, e non ci interessa avere una anteprima su Gutenberg (perché a nostro modo di vedere è solo una perdita di tempo).
Possiamo adesso passare a commentare il codice javascript ed il CSS necessario.
Il codice javascript del nostro carosello
Abbiamo inserito in un Gist il nostro codice Javascript (che ha bisogno di jQuery per funzionare) con tanto di commenti. Spiegato velocemente qui:
- Prima di tutto verifichiamo se nel DOM è presente qualche elemento con la classe CSS .class-carousel. Se infatti non c’è un carosello nella pagina, è inutile andare avanti!
- Creiamo poi un elemento HTML <link> che caricherà il CSS standard di slick.js dalla CDN gratuita cdnjs
- Carichiamo dinamicamente lo script Slick.js usando il metodo getScript di jQuery: in questo modo, non dobbiamo passare per il backend con wp_enqueue_script oppure con una chiamata Ajax al nostro server, perché possiamo usare sempre cdnjs
- All’interno di getScript, inizializiamo Slick, secondo le impostazione che preferiamo. Nel nostro caso abbiamo impostato 3 breakpoint per modificare il comportamento a 1024, 600 e 480 pixel di larghezza (ma forse son troppi)
Il codice CSS del nostro carosello
Oltre ad avere inserito del codice javascript, per migliorare l’aspetto del nostro carosello va personalizzato un po’ il CSS, ad esempio inserendo delle icone al posto dei bottoni “precedente” e “successivo” di slick.js, oppure cambiando i colori.
Ecco una base da cui potete partire: class-carousel.css
Noi abbiamo aggiunto delle icone (usando FontAwesome in versione 4.7.0) e personalizzato i colori del carosello secondo il nostro sito web: potete vederlo in azione nella nostra homepage nella sezione Dicono di noi. 🙂
