Ricerca…


Osservazioni

Per ulteriori informazioni, visitare la documentazione ufficiale all'indirizzo http://getbootstrap.com/javascript/#carousel , da cui derivano gli esempi e le informazioni di utilizzo HTML e Javascript di base.

Va notato che i caroselli non funzionano correttamente in IE 9 e precedenti a causa dell'uso di transizioni / animazioni CSS3.

Utilizzo HTML di base

Un carosello Bootstrap è un componente Bootstrap che crea una presentazione che scorre attraverso gli elementi all'interno del carosello.

Ecco un esempio di utilizzo HTML di base:

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

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Utilizzo e inizializzazione di Javascript di base

I componenti del carosello possono essere istanziati tramite jQuery con la funzione $('.carousel').carousel(options) , dove $('.carousel') è un riferimento di livello superiore al carosello specifico e le options è un oggetto Javascript che specifica il carosello attributi predefiniti.

L'oggetto options consente di definire più proprietà che influiscono sul comportamento del carosello. Queste proprietà sono definite come tali:

  • La proprietà interval accetta un tipo di number Javascript che consente a un utente di definire la quantità di tempo per cui il carosello visualizza una data diapositiva del carosello. Se viene specificato il valore booleano false , il carosello non ciclerà automaticamente.
  • La proprietà pause accetta un tipo di string Javascript che attiva o disattiva il comportamento in cui il ciclo automatico del carousel viene sospeso quando il mouse dell'utente entra nel carosello. Il valore predefinito (e solo) accettato è "hover".
  • La proprietà wrap accetta un tipo boolean Javascript che consente a un utente di definire se desidera che il carosello esegua un ciclo continuo senza fermarsi su una determinata diapositiva.
  • La proprietà della keyboard accetta un tipo boolean Javascript che consente a un utente di definire se desidera che il carosello risponda agli eventi della tastiera.

Ecco un esempio dell'utilizzo Javascript di base:

$('#carCarousel').carousel({ interval: 2500, pause: "hover", wrap: false, keyboard: true });

Come con altri componenti Bootstrap, le opzioni del carousel possono anche essere specificate in HTML tramite attributi di dati.



Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow