Come creare carosello di immagini con Bootstrap3

Oggi vediamo come creare un carosello con Bootstrap 3, noto anche come slideshow . E diventato uno dei componenti più importanti di un sito web moderno.Occasioni per usare un carosello sono tanti posiamo per esempio presentare varie immagini, video, ultimi articoli e notizie

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Bricioli di pane con Bootstrap
  14. Come realizzare accordeon

Bootstrap 3 essendo uno dei primi framework che funziona bene sia su shermi grandi sia su quelli piccoli di dispositivi mobili ha nel suo arsenale varie componenti. Uno di questi si chiama proprio Carousel puo funzionare da solo in base di html e css o gestito da jQuery. In questo articolo, vedimo come creare un carosello su Bootstrap. Cercheremo di scoprire vari personalizzazioni che Bootstrap offre attraverso HTML5 e JavaScript. Vediamo anche di agiungere qualche ellemento in piu al nostro Carosello alla fine.
Non c'è bisogno di essere un esperto in CSS e JavaScript per creare splendide caroselli con Bootstrap. Tutto quello che dovete avere è una certa conoscenza del HTML di base. Iniziamo.

Carosello con Bootstrap 3 come creare?

Prima di passare alla realizzarione del carosello, dobbiamo creare la carcassa della nostra pagina web e avremo bisogno di alcuni fail. Dal pacchetto di Bootstrap, avremo bisogno di 2 file: bootstrap.js e bootstrap.css.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Markup HTML della nostra pagina sara seguente:
Prima vediamo come fare su una pagina priva di altri elementi e alla fine del articolo vi spiegero come inserire un carosello Bootstrap sulla vostra pagina gia esistente.

<!DOCTYPE html>
<html lang="it">
 <head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carousel Bootstrap 3 </title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >/* versione del bootstrap.css remota */
<!-- Bootsrap utiliizza librereia jQuery per far funzionare il suo java script, quindi dobiamo collegare anche questa biblioteca alla nostra pagina ma sempre prima di bootstrap.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <h1>Ciao, mondo!</h1>
 </body>
</html>

Con il codice sopra abbiamo realizzato la struttura tipica di una pagina HTML cosi come consigliato dai creatori di Bootstrap che posiamo trovare sul loro sito. Ha meta tag necessari per la corretta visualizzazione su dispositivi mobili, in piu sono inclusi stili CSS di Bootstrap e file della libreria jQuery della ultima versione da un server CDN (è un server remoto e quindi non dobiamo piu scaricare questi fail e inserirli sul nostro sito ) e infine bootstrap.min.js sempre da un server CDN. È possibile inserire i file indicati sopra diretamente in qualche cartella del vostro sito invece di utilizzare CDN.

Nella scritura del codice della pagina html biblioteca jQuery deve essere per forza prima di fail bootstrap.min.js. e non viceversa!
Procediamo con la creazione della struttura del nostro carosello su Bootstrap. Rimuovere il messaggio "Ciao Mondo" dal codice sopra e inserire il seguente frammento di codice al suo posto.

<div id="myCarousel" class="carousel slide">
</div>

Con questo codice abiamo creato una scatola che conterrà il nostro carosello. L id che abbiamo aggiunto al nostro div ci servira per scegliere questo carosello perche sulla stessa pagina potremo avere piu di un carosello La classe .carousel richima frameworb Bootstrap e indica ceh al uinterno di questo div c'e un carosello. La classe .slide viene aggiunta al classe .carousel per creare l'effetto di scorrimento del carosello.

Principali elementi di un carosello bootstrap

Ogni carosello su Bootstrap puo avere 3 elementi: Carousel Indicators , Carousel Controls  e Slides . Primi 2 elementi sono opzionali, si può utilizzare o no e il terzo rapresenta il nostro contenuto del carosello.

Markup html interno del carosello.

Per creare diapositive all'interno di un Carosello Bootstrap, è necessario creare un altro elemento div all'interno dell'elemento div con la classe .carousel . Atribuire a questo div la classe .carousel-inner per avvolgere le diapositive creando cosi una altra scatola intorno alle immagini o altro contenuto che useremo nel caroselo, la nostra nuova strutura sara seguente:

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
    </div>
</div>

Elementi del contenuto del carosello .item

Una volta creato il blocco interno, abbiamo bisogno di inserire gli elementi di scorrimento (ancora una scatola piu piccola ) al suo interno. Ogni diapositiva vvera inserita di nuovo in un div con la classe .item

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <!-- Slide 1 e qui che meteremo il nostro conetenuto! -->
        </div>
        <div class="item">
            <!-- Slide 2 -->
        </div>
        <div class="item">
            <!-- Slide 1 -->
        </div>
    </div>
</div>

Ora le vostre diapositive sono pronti a ottenere le rispettive immagini. Inserite immagini all'interno del div con la classe .item . È possibile creare quanto ne volete di diapositive.

Diapostiva iniziale del carosello

L'aggiunta della classe .active alla classe .item della diapositiva dice a Bootstrap che questa è la diapositiva iniziale. Solo un elemento .item può avere questa classe. Carosello partira automaticamente dalla diapositiva con la classe .active al successivo elemento con la classe .item durante scorrimento.

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">/* la nostra diapositiva iniziale */
            <img src="/image/image1.png"/>
        </div>
        <div class="item">
            <img src="/image/image2.png"/>
        </div>
        <div class="item">
            <img src="/image/image3.png"/>
        </div>
    </div>
</div>

Il codice precedente produce il carosello come illustrato qui sotto.

/* versione del bootstrap.css remota */

Ora abbiamo un carosello che visualizza la prima immagine nascondendo altre diapositive. Queste diapositive non hanno alcun controllo per poter passare alla diapositiva successiva ed essi non scorrono in automatico.

Come far scorere le diapositive del carosello bootstrap in automatico

Il nostro carosello non cambiera diapositive finche non si agiunge ad essa atributo data-ride="carousel" e in oltre vorei far notare che per impostazione predefenita l'intevallo di scorimento è impostato su 5000 milesecondi, per poter controlare questa frequenza dobiamo aggiungere un attributo noto come data-interval all'elementocon con la classe .carousel. Questo attributo accetta valori in millisecondi. Il nostro codice sara cosi

<div id="myCarousel" class="carousel slide" data-interval="5000" data-ride="carousel">
    ....
</div>

Se ricarichiamo la pagina vediamo che il nostro carosello parte in automatico e lavora con effetto "Auto Sliding". Meraviglioso! Non è vero?

Se non vedi il carosello ricaraica la pagina.

In questo demo ho inserito parametro data-interval="1500" e non 5000 come avevo scritto sopra per mostrare come si puo cambiare la velocita di scorimento.
Vorei anche far notare che in questo esempio abbiamo inizializzato carosello soltanto col atributo data-ride="carousel" e non con jscript, quello che vediamo piu avvanti.

Aggiungere ellementi di controllo per  Carousello di Bootstrap 3

È arrivato  il momento di aggiungere altri elementi al carosello. Aggiungiamo prima i controlli.

Come spostarsi avanti e indietro fra le diapositive del carosello

 

I controlli sono due icone di navigazione che appaiono ai 2 bordi laterali del carosello.

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        ...
    </div>
    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>
 

In questo demo ho impostato come velocita di scorimento valore di default cio è 5000 mille cecondi per darti la possibilita di clicare sui controlli sulla destra e quello sulla sinistra.
I controlli sono realizati con il tag <a> con la classe .carousel-control. Inoltre, abbiamo bisogno di aggiungere un classe .left al tag <a> che indichera spostamento a sinistra e un classe .right per il tag a destra. Ciascuno dei tag di ancoraggio dovrebbe avere attributo href="" legato ad ID del suo elemento genitore che è nel nostro caso carosello con id #myCarousel . Si potrebbe aggiungere anche una rispettiva scritta per il  senso di passagio avanti o indietro . Ciò è attribuire un valore: prev e next.

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" ></span>
  <span class="sr-only">Prev</span>/*la scritta è opzionale */
 </a>

Ora, per ottenere le icone sulla destra e sinistra per ogni direzzione del controllo, useremo Glyphicons che vengono inseriti nei stili CSS di Bootstrap. La classe .glyphicon-chevron-left e .glyphicon-chevron-right vengono utilizzati per visualizzare icone a sinistra e a destra rispettivamente. Andiamo avanti e controlliamo la nostra pagina con il Carosello nel browser, si dovrebbe vedere i controlli che appaiono su entrambi i  lati.

Se sulla vostra pagina con Carosello non vedete frecce ma soltanto qualche segno verificate se avvete colegeto i font di Bootstrap scariabili nel pachetto con altri fail dalla pagina uficiale glyphicons-halflings-regular.eot e altre. Questi dovrai per forza inserire nella cartella fonts come scritto nel fail bootstrap.css o modificare il codice indicando un percorso deiverso

Font Awesome di Boostrap

Come realizzare elementi di controlo sotto le diapositive nel carosello

Ora aggiungiamo indicatori. Indicatori sono creati utilizzando elementi della lista ordinata. Vediamo la struttura HTML:

<div id="myCarousel" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            ...
        </div>
       
</div>

Al tag dell'elenco ordinato abbiamo attribuito la classe .carousel-indicators per identificarlo. Ciascuno degli elementi e rappresentato da  un indicatore. Aggiungere un attributo personalizzato chiamato data-slide-to a ciascuno dei elementi con numero di diapositiva come valore. Questi numeri di diapositive iniziano da 0. Quindi, se si dispone di 3 diapositive i numeri di diapositive sono 0, 1 e 2. Si dovrebbe anche aggiungere un altro attributo personalizzato data-target dove indicheremo ID del carosello genitore di indicatori.

Ora, dovremmo avere un carosello completo di tutte i 3 componenti: Carousel Indicators, Slides e Carousel Controls

 

Come aggiungere un sottotitolo alla diapositiva.

Aggiungere una scritta alla diapositiva nel carosello Bootstrap è abbastanza semplice. È sufficente inserire un elemento HTML (paraggrafo o titolo )nella stessa scatola o blocco con la classe .item della rispettiva immagine del carosello. Per esempio:

<div class="item active">
    <img src="/slide1.png"/>
    <div class="carousel-caption">
        <h3>Image 1</h3>
        <p>Image 1 Description</p>
    </div>
</div>
<div class="item">
    <img src="/slide2.png"/>
    <div class="carousel-caption">
        <h3>Image 2</h3>
        <p>Image 2 Description</p>
    </div>
</div>
<div class="item">
    <img src="/slide3.png"/>
    <div class="carousel-caption">
        <h3>Image 3</h3>
        <p>Image 3 Description</p>
    </div>
</div>
<!--Posiamo realizzare anche un titolo clicabile  nel nostro caso la frase rachiusa nel tag <h3></h3>  inserendo  tag <a></a> al suo interno e indicando il punto di destinazione .-->
<div class="carousel-caption">
    <h3><a href="/link.html">Image 1</a></h3>
    <p>Image 1 Description</p>
</div>

Ora siamo  pronti con la versione finale del nostro Carosello. Vediamo carouselo completto, che abbiamo passo a passo sviluppato in questo articolo.

E qui sotto vediamo il codice finale del nostro carosello. Ho inserito  carosello in un div con la classe scatola. Potrai creare qualche altro contenitore atraverso un div per magari posizionare il tuo carosello in qulche posto desiderato. Non dimenticare di collegare le rispetive fail di supporto come bootstrap.min.css jquery.min.js e bootstrap.min.js altrimenti  il tuo carosello non funzionera (qui .min.js  indica una versione minimisata del fail).

<!DOCTYPE html>
<html lang="it">
 <head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carousel Bootstrap 3 </title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" ><!-- versione del bootstrap.css remota -->
<!-- Bootsrap utiliizza librereia jQuery per far funzionare il suo java script, quindi dobiamo collegare anche questa biblioteca alla nostra pagina ma sempre prima di bootstrap.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
<div class="scatola">
<div id="myCarousel" class="carousel slide" data-interval="5000" data-ride="carousel">
<!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="http://ioeweb.it/images/jquery/bootstrap3/slide1.png"/>
                  <div class="carousel-caption">
                        <h3><a href="#">Image 1</a></h3>
                     <p>Image 1 Descrizione</p>
                </div>
        </div>
        <div class="item ">
            <img src="http://ioeweb.it/images/jquery/bootstrap3/slide2.png"/>
<div class="carousel-caption">
                        <h3><a href="#">Image 2</a></h3>
                     <p>Image 2 Descrizione</p>
                </div>
        </div>
        <div class="item">
            <img src="http://ioeweb.it/images/jquery/bootstrap3/slide3.png"/>
            <div class="carousel-caption">
                        <h3><a href="#">Image 3</a></h3>
                     <p>Image 3 Descrizione</p>
                </div>
        </div>
    </div>
    <!-- Controls -->   
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" ></span>
 </a>
 <a class="right carousel-control" href="#myCarousel" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" ></span>
 </a>
</div>
</div>
 </body>
</html>
 

Puoi copiare il codice sopra nel tuo editore di testo salvarlo con estensione  .html e aprire questo fail nel tuo browser preferito e potresti vedere carosello in azione.

Per adesso il nostro carosello funziona solo sui CSS ma qui sotto vediamo come gestirlo anche atraverso jquery, sfrutando i due fail di js indicati sopra

Personalizare Carousello Bootstrap 3 con jQuery

Usando java script posiamo personalizzare nostro caroselo ancora di piu. Per attivare nostro carosello di immagini attraverso JavaScript, è necessario richiamare il metodo .carousel (). di jQuery ( libreria jQuery e una versione semplificata di JavaScript)

Non utilizzare metodi JavaScript insieme con data-ride="carousel" e ovviamente data-interval=".." o atributto data- !

<script type="text/javascript">
     $(document).ready(function(){
       $('.carousel').carousel();
     });
</script>

Il codice di jQuery come sopra deve scritto dopo il carosello e se la libreria jQuery e bootstrap.js sono inseriti dopo carosello diretamente sula pagina allora script di controlo deve essere inserito ultimo, dovremo mantenere la gerarchia! 

Il metodo descritto sopra accetta anche un oggetto JSON per personalizzare il comportamento predefinito del carosello. Inseriamo valore del intervallo direttamente in esso.

<script type="text/javascript">
     $(document).ready(function(){
       $('.carousel').carousel({
           interval: 2000/*  l'intervalllo del cambio di diapositive */
       });
     });
</script>

Ciascuna delle proprietà JSON può essere utilizzata anche come un elemento data- * attribuita direttamente ad un elemento.  Vediamo altre proprietà di personalizzazione disponibili nel Bootstrap:
      .pause - Accetta un valore stringa (di testo). Quando è impostato su hover, il carosello si ferma al passagio del cursore del mouse  .
      .wrap - Si tratta di un attributo booleano (logico).

Quando è impostato su true, il carosello prosegue il suo scorrimento fino al ultima diapositiva e puoi ricomincia dalla prima, se impostato su false il nostro carosello si fermerà dopo aver mostrato tutte le diapositive in esso contenute.

 

Eventi di Bootstrap Carousel.

Bootstrap innesca 2 eventi personalizzati nel corso del funzionamento dello slid show. Questi eventi possono essere molto utile se avete bisogno di eseguire alcune azioni quando il carosello è in funzione.
      .slide.bs.carousel: Questo evento viene generato appena prima della visualizzazione della diapositiva
      .slid.bs.carousel: Questo evento viene generato subito dopo che visualizzazione è finita.
Vediamo come usarli.

<script type="text/javascript">
  $(document).ready(function(){
    $('#myCarousel').on('slide.bs.carousel', function () {
     console.log("Sliding instruction Received!");
    });
    $('#myCarousel').on('slid.bs.carousel', function () {
     console.log("Sliding over!");
    });
  });
</script>

Aprire la finestra di console nel tuo browser. Si può vedere l'output come mostrato nell'immagine sopra. È inoltre possibile utilizzare questi eventi per creare la comunicazione tra il server e il client quando il carosello è in funzione.

Conclusione

Attraverso questo articolo, abbiamo imparato molte cose importanti su Bootstrap 3 Carousel. Abbiamo visto come creare un carosello di base senza alcun controllo.

Poi abbiamo visto come aggiungere  effetto "Auto Sliding". Abbiamo anche imparato come aggiungere controlli e gli indicatori al carosello di Bootstrap. Infine, abbiamo visto come utilizzare gli eventi personalizzati di bootstrap per caroselli.
Provate di testare il vostro carosello su dispositivi mobili di piccole dimensioni. Se si stanno verificando i problemi durante la visualizzazione del carosello (le immagini non si rimpiccioliscono ), vi consiglio di controllare la struttura HTML che state utilizzato. Una struttura HTML sbagliata sicuramente impedirà coretto funzionamento del Carosello.

Letto 3541 volte