CONTATTACI

Blog

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).

../Schermata%202021-06-04%20alle%2017.53.14.png

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.
 

../Schermata%202021-06-04%20alle%2018.10.43.png

../Schermata%202021-06-04%20alle%2018.11.26.png

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:

../Schermata%202021-06-07%20alle%2012.01.37.png

REGOLE CSS:

../Schermata%202021-06-07%20alle%2012.28.17.png

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

../Schermata%202021-06-07%20alle%2013.52.56.png

STYLE

../Schermata%202021-06-07%20alle%2013.56.49.png

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.

../Schermata%202021-06-07%20alle%2014.02.31.png

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.

../Schermata%202021-06-07%20alle%2014.14.16.png

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.

../Schermata%202021-06-07%20alle%2014.26.18.png

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/

Articoli correlati

Il linguaggio HTML (Hypertext Markup Language) è uno dei più conosciuti e diffusi: lo si trova infatti praticamente in tutte le pagine web esistenti. È una scelta popolare tra i principianti che si…

Seguici su Facebook

Vuoi entrare nel mondo della programmazione?

Scopri di più sui nostri corsi!

Chiamaci al numero verde

Contattaci su WhatsApp

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.