Giostra

Un componente di presentazione per scorrere gli elementi, immagini o diapositive di testo, come un carosello.

Come funziona

Il carosello è una presentazione per scorrere una serie di contenuti, costruiti con trasformazioni 3D CSS e un po' di JavaScript. Funziona con una serie di immagini, testo o markup personalizzato. Include anche il supporto per i controlli e gli indicatori precedenti/successivi.

Nei browser in cui è supportata l' API di visibilità della pagina , il carosello eviterà lo scorrimento quando la pagina Web non è visibile all'utente (ad esempio quando la scheda del browser è inattiva, la finestra del browser è ridotta a icona, ecc.).

Tieni presente che i caroselli nidificati non sono supportati e generalmente i caroselli non sono conformi agli standard di accessibilità.

Infine, se stai creando il nostro JavaScript dal sorgente, richiedeutil.js .

Esempio

I caroselli non normalizzano automaticamente le dimensioni delle diapositive. Pertanto, potrebbe essere necessario utilizzare utilità aggiuntive o stili personalizzati per ridimensionare il contenuto in modo appropriato. Sebbene i caroselli supportino i controlli e gli indicatori precedenti/successivi, non sono esplicitamente richiesti. Aggiungi e personalizza come meglio credi.

Assicurati di impostare un ID univoco .carouselper i controlli opzionali, soprattutto se stai utilizzando più caroselli su una singola pagina.

Solo diapositive

Ecco un carosello solo con diapositive. Notare la presenza di .d-blocke .img-fluidsulle immagini del carosello per impedire l'allineamento dell'immagine predefinito del browser.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Con controlli

Aggiungendo i controlli precedente e successivo:

Precedente Prossimo

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Con indicatori

Puoi anche aggiungere gli indicatori al carosello, insieme ai controlli.

Precedente Prossimo

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Con didascalie

Aggiungi facilmente didascalie alle tue diapositive con l' .carousel-captionelemento all'interno di qualsiasi .carousel-item. Possono essere facilmente nascosti su finestre più piccole, come mostrato di seguito, con utilità di visualizzazione opzionali . Inizialmente li nascondiamo con .d-nonee li riportiamo su dispositivi di medie dimensioni con .d-md-block.

Prima etichetta diapositiva

Nulla vitae elit libero, a pharetra augue mollis interdum.

Etichetta della seconda diapositiva

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Terza etichetta diapositiva

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Precedente Prossimo

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Utilizzo

Tramite attributi di dati

Usa gli attributi dei dati per controllare facilmente la posizione del carosello. data-slideaccetta le parole chiave prevo next, che altera la posizione della diapositiva rispetto alla sua posizione corrente. In alternativa, utilizzare data-slide-toper passare un indice di diapositiva non elaborato al carosello data-slide-to="2", che sposta la posizione della diapositiva su un indice particolare che inizia con 0.

L' data-ride="carousel"attributo viene utilizzato per contrassegnare un carosello come animato a partire dal caricamento della pagina. Non può essere utilizzato in combinazione con l'inizializzazione JavaScript esplicita (ridondante e non necessaria) dello stesso carosello.

Tramite JavaScript

Chiama il carosello manualmente con:

$('.carousel').carousel()

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-interval="".

Metodi

.carousel(options)

Inizializza il carosello con un'opzione opzionale objecte inizia a scorrere gli elementi.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Scorre gli elementi del carosello da sinistra a destra.

.carousel('pause')

Impedisce al carosello di scorrere gli oggetti.

.carousel(number)

Fa scorrere il carosello su un fotogramma particolare (basato su 0, simile a una matrice). Ritorna al chiamante prima che l'elemento di destinazione sia stato mostrato (cioè prima slid.bs.carouselche si verifichi l'evento).

.carousel('prev')

Passa all'elemento precedente. Ritorna al chiamante prima che sia stato mostrato l'elemento precedente (cioè prima slid.bs.carouselche si verifichi l'evento).

.carousel('next')

Passa all'elemento successivo. Ritorna al chiamante prima che venga mostrato l'elemento successivo (cioè prima slid.bs.carouselche si verifichi l'evento).

.carousel('dispose')

Distrugge il carosello di un elemento.

Eventi

La classe del carosello di Bootstrap espone due eventi per l'aggancio alla funzionalità del carosello. Entrambi gli eventi hanno le seguenti proprietà aggiuntive:

• direction: La direzione in cui scorre il carosello (o "left"o "right").
• relatedTarget: l'elemento DOM che viene inserito come elemento attivo.
• from: L'indice dell'elemento corrente
• to: L'indice dell'elemento successivo

Tutti gli eventi del carosello vengono attivati ​​sul carosello stesso (cioè al <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})