Creare un Carousel Slider con Glide.js e Bootstrap 5

Oggi giorno quando si sviluppa un sito web, un’applicazione o un software si presta molta attenzione all’aspetto grafico. 

Molteplici sono i widgets (componenti grafici) che si utilizzano per abbellire il nostro applicativo, tra i più gettonati c’è il Carousel Slider. Quest’ultimo viene utilizzato principalmente per mostrare immagini, slogan, oppure prodotti nel caso specifico degli e-commerce. Uno Slider può essere realizzato a scorrimento manuale: attraverso l’ausilio di frecce o bullets, oppure automatico: impostando un timer di transizione.

In questo articolo ci soffermiamo principalmente sui Carousels messi a disposizione da Bootstrap 5 e da Glide.js: i più efficienti, semplici da utilizzare ed ottimizzati.

Per quanto concerne Bootstrap, prima di poter utilizzare qualsiasi altro componente o questo in particolare: dobbiamo inserire nel nostro file HTML i collegamenti alla CDN (Content Delivery Network).

Puoi notare dallo snippet di codice sopra riportato: un collegamento allo style CSS di Bootstrap ed uno al suo Javascript. Dopo aver inserito il link CSS e lo script JS possiamo copiare il codice degli esempi di Carousel che Bootstrap mette a disposizione. 

Nella barra di sinistra puoi trovare la voce Components, e al suo interno il componente Carousel.
 

Puoi scegliere, in base alle tue esigenze tra tantissimi Carousels già preimpostati. Nell’esempio in alto, ho scelto di riportare il codice di un Carousel con gli indicatori di direzione.

Con pochi passaggi e pochissime linee di codice hai a disposizione un Carousel con i controlli direzionali completamente funzionanti e l’ autoplay già impostato.

Analizzando il codice puoi notare i tag HTML <img> con attributo src, dove potrai inserire il percorso delle immagini da mostrare nel Carousel. Chiaramente puoi aggiungere più di tre immagini, ti basterà copiare l’intero blocco div con all’interno il tag <img>.

Personalmente ti consiglio di impostare le immagini come sfondo del suo div genitore (con classe carousel-item ) per ottenere una corretta visualizzazione. NB: ricordati di impostare un’altezza minima altrimenti l’immagine di sfondo non si visualizzerà. Nel momento in cui scegliamo di utilizzare un’immagine come sfondo dobbiamo applicare delle specifiche regole CSS in modo tale da impostare l’immagine in maniera corretta.

STRUTTURA HTML:

REGOLE CSS:

Oltre ad impostare l’altezza minima del nostro carousel item, specifichiamo che l’immagine deve essere visualizzata interamente e deve occupare tutto lo spazio a disposizione. Per fare questo utilizziamo la proprietà: CSS background-size: cover. L’ultima proprietà (background-repeat: no-repeat) ha lo scopo di non far ripetere l’immagine più volte.

Per quanto concerne Glide.js, anche qui hai bisogno di utilizzare collegamenti alla CDN sia per il JS attraverso il tag <script></script> che inserirai alla fine del body, che per lo stile.

JAVASCRIPT

STYLE

La struttura base del nostro Carousel è costituita in questo modo. NB: non ti dimenticare di inserire l’attributo data-glide-el, fondamentale per il corretto funzionamento.

Possiamo aggiungere i controlli direzionali che non sono presenti nella struttura sopra riportata. Per fare questo aggiungiamo questo snippet all’interno del div con classe glide__track.

Per quanto concerne il funzionamento lato JAVASCRIPT, devi inserire nello script questo codice. Hai la possibilità di inserire molteplici opzioni in un oggetto js in questo caso di nome config, con lo scopo di configurare a tuo piacimento il Carousel. NB: non i dimenticare di inserire la classe  .glide, e di passare l’oggetto come parametro.

Consulta le documentazioni ufficiali per qualsiasi dubbio o per esplorare in maniera più approfondita i Carousels di Bootstrap o di Glide.js.

Link Bootstrap: https://getbootstrap.com/docs/5.0/components/carousel/

Link Glide.js: https://glidejs.com/docs/setup/