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…
Essere uno sviluppatore web vuol dire imparare più linguaggi di programmazione per poter creare diversi tipi di applicazioni.  Per ogni applicazione, la maggior parte delle volte, …
Un buon programmatore, si sa, necessita di un ampio bagaglio di conoscenze per potersi districare tra le difficoltà che questo mestiere comporta. Oggi le richieste sul mercato sono molteplic…
UI UX design: un settore dalle mille sfaccettature Il design dell’esperienza utente (UX) e dell’interfaccia utente (UI) costituisce il fondamento su cui si costruiscono le interazioni digitali coinvo…
Nel contesto dello sviluppo web, il backend riveste un ruolo cruciale nell’assicurare il corretto funzionamento di un sito. Il backend, si occupa delle operazioni non visibili agli utenti finali, gest…
Il Data Analyst è una figura professionale sempre più richiesta nel mondo del lavoro, grazie alla sua capacità di analizzare e interpretare grandi quantità di dati per supportare le decisioni azie…

Seguici su Facebook

Scopri di più sul corso Hackademy

Inizia la tua nuova carriera nel mondo digital e tech.

Candidati ora

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

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

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

Esempio di finanziamento  

Importo finanziato: € 2440 in 24 rate da € 112 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 2788,68.

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/07/2023 al 31/12/2023.

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 183 €/mese.

Esempio di finanziamento 

Importo finanziato: € 3990 in 24 rate da € 183 – TAN fisso 9,37% TAEG 12,57% – importo totale del credito € 4496,56.

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/07/2023 al 31/12/2023.

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.