Carrusel
Un cumpunente di slideshow per andà in bicicletta attraversu elementi-imaghjini o diapositive di testu-cum'è un carrusel.
Cumu funziona
U carrusel hè un slideshow per andà in bicicletta per una seria di cuntenutu, custruitu cù CSS 3D trasformazioni è un pocu di JavaScript. Funziona cù una seria d'imaghjini, testu, o marcatura persunalizata. Include ancu supportu per i cuntrolli è indicatori precedenti / prossimi.
In i navigatori induve l' API di Visibilità di a Pagina hè supportata, u carrusel eviterà sliding quandu a pagina web ùn hè micca visibile per l'utilizatore (per esempiu, quandu a tabulazione di u navigatore hè inattiva, a finestra di u navigatore hè minimizzata, etc.).
prefers-reduced-motion
media query. Vede a
sezione di movimentu ridottu di a nostra documentazione d'accessibilità .
Per piacè esse cuscenti chì i carrusels nidificati ùn sò micca supportati, è i carruselli ùn sò generalmente micca conformi à i normi di accessibilità.
Infine, se custruite u nostru JavaScript da a fonte, hè necessariuutil.js
.
Esempiu
I carruselli ùn normalizzanu micca automaticamente dimensioni di slide. Comu tali, pudete bisognu di utilizà utilità supplementari o stili persunalizati per dimensionà u cuntenutu in modu adattatu. Mentre i carrusels supportanu i cuntrolli è indicatori precedenti / successivi, ùn sò micca esplicitamente necessarii. Aghjunghjite è persunalizà cum'è vede bè.
A .active
classa deve esse aghjuntu à una di e diapositive altrimenti u carrusel ùn serà micca visibile. Assicuratevi ancu di stabilisce un unicu id
per i .carousel
cuntrolli opzionali, soprattuttu s'è vo aduprate parechje carrusels in una sola pagina. L'elementi di cuntrollu è indicatori devenu avè un data-target
attributu (o href
per ligami) chì currisponde à id
l' .carousel
elementu.
Solu diapositive
Eccu un carrusel cù diapositive solu. Nota a prisenza di l' imaghjini .d-block
è .w-100
nantu à u carrusel per impedisce l'allineamentu di l'imaghjini predeterminati di u navigatore.
<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>
Cù cuntrolli
Aghjunghjendu i cuntrolli precedenti è successivi. Avemu cunsigliatu per utilizà <button>
elementi, ma pudete ancu aduprà <a>
elementi cù 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>
Cù indicatori
Pudete ancu aghjunghje l'indicatori à u carrusel, à fiancu à i cuntrolli.
<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>
Cù legenda
Aghjunghjite facilmente i sottotitoli à e vostre diapositive cù l' .carousel-caption
elementu in ogni .carousel-item
. Puderanu esse facilmente ammucciati nantu à i vetri più chjuchi, cum'è mostratu quì sottu, cù utilità di visualizazione opzionali . Li nascondemu inizialmente cù .d-none
è li rimettimu in i dispositi di medie dimensioni cù .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>
Crossfade
Aghjunghjite .carousel-fade
à u vostru carrusel per animate diapositive cù una transizione di dissolvenza invece di una diapositiva. Sicondu u vostru cuntenutu di carousel (per esempiu, diapositive di testu solu), pudete vulete aghjunghje .bg-body
o qualchì CSS persunalizatu à u .carousel-item
s per un crossfading propiu.
<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
Intervallu individuale
Aghjunghjite data-interval=""
à a .carousel-item
per cambià a quantità di tempu per ritardà trà u ciculu automaticamente à u prossimu articulu.
<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>
Disattivate u toccu di scorrimentu
I carruselli supportanu u scorrimentu à sinistra / destra nantu à i dispositi touchscreen per spustà trà diapositive. Questu pò esse disattivatu cù l' data-touch
attributu. L'esempiu quì sottu ùn include micca ancu l' data-ride
attributu è hà data-interval="false"
cusì ùn hè micca autoplay.
<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>
Usu
Via attributi di dati
Aduprate l'attributi di dati per cuntrullà facilmente a pusizione di u carrusel. data-slide
accetta e parolle chjave prev
o next
, chì altera a pusizione di slide relative à a so pusizione attuale. In alternativa, aduprate data-slide-to
per passà un indice di diapositiva brutu à u carrusel data-slide-to="2"
, chì cambia a pusizione di diapositiva à un indice particulari chì principia cù 0
.
L' data-ride="carousel"
attributu hè utilizatu per marcà un carrusel cum'è animazione à partesi da a carica di a pagina. Se ùn aduprate micca data-ride="carousel"
per inizializà u vostru carrusel, avete da inizializà sè stessu. Ùn pò micca esse usatu in cumminazione cù l'inizializazione JavaScript esplicita (ridondante è innecessaria) di u stessu carrusel.
Via JavaScript
Chjamate carousel manualmente cù:
$('.carousel').carousel()
Opzioni
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-
, cum'è in data-interval=""
.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
intervallu | numeru | 5000 | A quantità di tempu per ritardà trà u ciclu automaticamente un articulu. Se false , u carrusel ùn serà micca automaticamente ciclu. |
tastiera | booleanu | veru | Se u carrusel deve reagisce à l'avvenimenti di u teclatu. |
pausa | stringa | booleanu | 'passa' | Se impostate à Nantu à i dispositi abilitati à u toccu, quandu si mette in |
cavalcà | stringa | falsu | Riproduce automaticamente u carrusel dopu chì l'utilizatore cicule manualmente u primu articulu. Se impostatu à 'carousel' , riproduce automaticamente u carrusel in carica. |
avvolgi | booleanu | veru | Sia chì u carrusel duveria ciclu in modu continuu o avè tappe duru. |
toccu | booleanu | veru | Se u carrusel duveria sustene l'interazzione di scorri à sinistra / destra in i dispositi touchscreen. |
I metudi
Metudi asincroni è transizioni
Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .
Vede a nostra documentazione JavaScript per più infurmazione .
.carousel(options)
Inizializza u carrusel cù opzioni opzionali object
è principia à ciclu per l'articuli.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Cicli attraversu l'articuli di carrusel da manca à diritta.
.carousel('pause')
Impedisce à u carrusel di passà in bicicletta attraversu l'articuli.
.carousel(number)
Cicla u carrusel à un quadru particulari (basatu 0, simile à un array). Ritorna à u chjamante prima chì l'articulu di destinazione hè statu mostratu (vale à dì prima chì l' slid.bs.carousel
avvenimentu si faci).
.carousel('prev')
Cicli à l'articulu precedente. Ritorna à u chjamante prima chì l'elementu precedente hè statu mostratu (vale à dì prima di l' slid.bs.carousel
avvenimentu).
.carousel('next')
Cicli à u prossimu articulu. Ritorna à u chjamante prima chì l'elementu prossimu sia statu mostratu (vale à dì prima chì l' slid.bs.carousel
avvenimentu si faci).
.carousel('dispose')
Distrughje un carrusel d'elementu.
.carousel('nextWhenVisible')
Ùn cicculate micca u carrusel à u prossimu quandu a pagina ùn hè micca visibile o u carrusel o u so parente ùn hè micca visibile. Ritorna à u chjamante prima chì l'elementu prossimu sia statu mostratu (vale à dì prima chì l' slid.bs.carousel
avvenimentu si faci).
.carousel('to')
Cicla u carrusel à un quadru particulari (basatu 0, simile à un array). Ritorna à u chjamante prima chì l'elementu prossimu sia statu mostratu (vale à dì prima chì l' slid.bs.carousel
avvenimentu si faci).
Avvenimenti
A classa di carrusel di Bootstrap espone dui avvenimenti per attaccà à a funziunalità di carrusel. I dui avvenimenti anu e seguenti proprietà supplementari:
direction
: A direzzione in quale u carrusel hè sliding (o"left"
o"right"
).relatedTarget
: L'elementu DOM chì hè sbulicatu in u locu cum'è l'elementu attivu.from
: L'indice di l'elementu attualeto
: L'indice de l'élément suivant
Tutti l'avvenimenti di carrusel sò sparati à u carrusel stessu (vale à dì à u <div class="carousel">
).
Tipu d'avvenimentu | Descrizzione |
---|---|
slide.bs.carousel | Questu avvenimentu spara immediatamente quandu u slide metudu di istanza hè invucatu. |
slid.bs.carousel | Questu avvenimentu hè sparatu quandu u carrusel hà finitu a so transizione di slide. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Cambia a durata di a transizione
A durazione di a transizione .carousel-item
pò esse cambiata cù a $carousel-transition
variabile Sass prima di cumpilà o stili persunalizati se aduprate u CSS compilatu. Se parechje transizioni sò applicate, assicuratevi chì a transizione di trasformazione hè definita prima (per esempiu, transition: transform 2s ease, opacity .5s ease-out
).