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.).
prefers-reduced-motion
media query. Vedi la
sezione movimento ridotto della nostra documentazione sull'accessibilità .
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.
La .active
classe deve essere aggiunta a una delle diapositive, altrimenti il carosello non sarà visibile. Assicurati anche di impostare un unico id
per i .carousel
controlli opzionali, soprattutto se stai utilizzando più caroselli su una singola pagina. Gli elementi di controllo e indicatore devono avere un data-target
attributo (o href
per i collegamenti) che corrisponda id
a quello .carousel
dell'elemento.
Solo diapositive
Ecco un carosello solo con diapositive. Notare la presenza di .d-block
e .w-100
sulle 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 src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
</div>
Con controlli
Aggiunta dei controlli precedente e successivo. Ti consigliamo di utilizzare <button>
gli elementi, ma puoi anche utilizzare <a>
gli elementi con role="button"
.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Con indicatori
Puoi anche aggiungere gli indicatori al carosello, insieme ai controlli.
<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 src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Con didascalie
Aggiungi facilmente didascalie alle tue diapositive con l' .carousel-caption
elemento 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-none
e li riportiamo su dispositivi di medie dimensioni con .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Dissolvenza incrociata
Aggiungi .carousel-fade
al tuo carosello per animare le diapositive con una transizione di dissolvenza invece di una diapositiva. A seconda del contenuto del tuo carosello (ad esempio, diapositive di solo testo), potresti voler aggiungere .bg-body
o alcuni CSS personalizzati alle .carousel-item
s per una corretta dissolvenza incrociata.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
.carousel-item
Intervallo individuale
Aggiungi data-interval=""
a .carousel-item
per modificare la quantità di tempo di ritardo tra il passaggio automatico all'elemento successivo.
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Disabilita lo scorrimento del tocco
I caroselli supportano lo scorrimento a sinistra/destra sui dispositivi touchscreen per spostarsi tra le diapositive. Questo può essere disabilitato usando l' data-touch
attributo. Anche l'esempio seguente non include l' data-ride
attributo e data-interval="false"
quindi non viene riprodotto automaticamente.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Utilizzo
Tramite attributi di dati
Usa gli attributi dei dati per controllare facilmente la posizione del carosello. data-slide
accetta le parole chiave prev
o next
, che altera la posizione della diapositiva rispetto alla sua posizione corrente. In alternativa, utilizzare data-slide-to
per 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. Se non lo usi data-ride="carousel"
per inizializzare il tuo carosello, devi inizializzarlo tu stesso. 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=""
.
Nome | Tipo | Predefinito | Descrizione |
---|---|---|---|
intervallo | numero | 5000 | La quantità di tempo di ritardo tra il ciclo automatico di un elemento. Se false , il carosello non si avvierà automaticamente. |
tastiera del computer | booleano | VERO | Se il carosello deve reagire agli eventi della tastiera. |
pausa | stringa | booleano | 'librarsi' | Se impostato su Sui dispositivi abilitati al tocco, quando è impostato su |
giro | corda | falso | Riproduce automaticamente il carosello dopo che l'utente esegue manualmente il ciclo del primo elemento. Se impostato su 'carousel' , riproduce automaticamente il carosello al caricamento. |
avvolgere | booleano | VERO | Se il carosello deve scorrere continuamente o avere arresti bruschi. |
tocco | booleano | VERO | Se il carosello deve supportare le interazioni di scorrimento a sinistra/destra sui dispositivi touchscreen. |
Metodi
Metodi e transizioni asincrone
Tutti i metodi API sono asincroni e avviano una transizione . Ritornano al chiamante non appena la transizione è iniziata ma prima che termini . Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .
Consulta la nostra documentazione JavaScript per ulteriori informazioni .
.carousel(options)
Inizializza il carosello con un'opzione opzionale object
e 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.carousel
che 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.carousel
che si verifichi l'evento).
.carousel('next')
Passa all'elemento successivo. Ritorna al chiamante prima che venga mostrato l'elemento successivo (cioè prima slid.bs.carousel
che si verifichi l'evento).
.carousel('dispose')
Distrugge il carosello di un elemento.
.carousel('nextWhenVisible')
Non scorrere il carosello al successivo quando la pagina non è visibile o il carosello o il suo genitore non sono visibili. Ritorna al chiamante prima che venga mostrato l'elemento successivo (cioè prima slid.bs.carousel
che si verifichi l'evento).
.carousel('to')
Fa scorrere il carosello su un fotogramma particolare (basato su 0, simile a una matrice). Ritorna al chiamante prima che venga mostrato l'elemento successivo (cioè prima slid.bs.carousel
che si verifichi l'evento).
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 correnteto
: L'indice dell'elemento successivo
Tutti gli eventi del carosello vengono attivati sul carosello stesso (cioè al <div class="carousel">
).
Tipo di evento | Descrizione |
---|---|
diapositiva.bs.carousel | Questo evento viene attivato immediatamente quando slide viene richiamato il metodo dell'istanza. |
carosello.bs.scorrevole | Questo evento viene attivato quando il carosello ha completato la transizione della diapositiva. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Modifica la durata della transizione
La durata della transizione di .carousel-item
può essere modificata con la $carousel-transition
variabile Sass prima della compilazione o stili personalizzati se stai usando il CSS compilato. Se vengono applicate più transizioni, assicurarsi che la transizione di trasformazione sia prima definita (ad es. transition: transform 2s ease, opacity .5s ease-out
).