CONTATTACI

Guide per aspiranti programmatori

Lezione 13 / 15

Bootstrap Carousel: cos’è e come funziona

Cos’è un carousel in Bootstrap?
Il carousel in Bootstrap è un componente che permette di mostrare un insieme di immagini o contenuti in sequenza, uno alla volta, all’interno di un’area di visualizzazione. Questo componente è molto utile per presentare i prodotti in una pagina di e-commerce, mostrare le foto di una galleria o offrire un’anteprima dei contenuti di un blog.

Come funziona un carousel in Bootstrap?
Il carousel di Bootstrap è composto da un’area di visualizzazione principale e dai controlli di scorrimento (prev e next) che permettono di navigare tra le varie slide. Le slide sono costituite da immagini o contenuti, e vengono visualizzate una alla volta con una transizione animata.

Vediamo ora come realizzare un carousel in Bootstrap; Ecco i passaggi da seguire per creare un carousel in Bootstrap:

  1. Includere le librerie di Bootstrap: Per prima cosa, è necessario includere le librerie di Bootstrap nel tuo progetto. Questo può essere fatto includendo le librerie CSS e JavaScript di Bootstrap nella tua pagina HTML.
  2. Creare la struttura HTML del carousel: Successivamente, devi creare la struttura HTML del carousel. Ciò include l’area di visualizzazione principale, i controlli di scorrimento e le slide. Le slide sono costituite da immagini o contenuti, e ogni slide deve essere contenuta in un elemento div con la classe “carousel-item”.
  3. Aggiungere il codice JavaScript: Per far funzionare il carousel, è necessario aggiungere il codice JavaScript che implementa la logica di scorrimento delle slide. Questo può essere fatto includendo le librerie JavaScript di Bootstrap nella tua pagina HTML e creando un’istanza di un oggetto Carousel.
  4. Personalizzare il tuo carousel: Bootstrap offre molte opzioni di personalizzazione per il carousel, come la possibilità di modificare la durata della transizione, la velocità di scorrimento delle slide e la visualizzazione dei controlli di scorrimento. Queste opzioni possono essere specificate nella configurazione del carousel.
  5. Aggiungere il tuo contenuto: Infine, è possibile aggiungere il tuo contenuto alle slide del carousel. Ciò può includere immagini, testo e pulsanti che guidano l’utente verso le pagine del tuo sito

 

Ecco un esempio di codice HTML e JavaScript per un carousel semplice in italiano:

<div id="mioCarousel" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#mioCarousel" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#mioCarousel" data-bs-slide-to="1"></li>
    <li data-bs-target="#mioCarousel" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="img1.jpg" alt="Prima slide" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img2.jpg" alt="Seconda slide" />
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img3.jpg" alt="Terza slide" />
    </div>
  </div>
  <a
    class="carousel-control-prev"
    href="#mioCarousel"
    role="button"
    data-bs-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Precedente</span>
  </a>
  <a
    class="carousel-control-next"
    href="#mioCarousel"
    role="button"
    data-bs-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Successivo</span>
  </a>
</div>

<script>
  $(document).ready(function () {
    $("#mioCarousel").carousel();
  });
</script>

Nella prima parte del codice HTML, viene creato il carousel con un ID personalizzato “mioCarousel”. Viene anche creato un elenco puntato “carousel-indicators” che mostra il numero di slide presenti nel carousel.

All’interno dell’elemento “carousel-inner”, ci sono tre elementi “carousel-item” che rappresentano le slide del carousel. Ciascuna slide contiene un’immagine e un testo alternativo (alt) descrittivo.

Nella seconda parte del codice HTML, sono presenti i controlli di scorrimento del carousel (precedente e successivo) che consentono di navigare tra le slide. Per far funzionare i controlli di scorrimento, viene utilizzato del codice JavaScript jQuery che inizializza il carousel al caricamento della pagina. Prova a realizzarne uno! 

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.