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 Pagina hè supportata, u carrusel eviterà di scorrimentu 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 carruselli nidificati ùn sò micca supportati, è i carruselli ùn sò generalmente micca conformi à i normi di accessibilità.
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-bs-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-bs-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-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Cù indicatori
Pudete ancu aghjunghje l'indicatori à u carrusel, à fiancu à i cuntrolli.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">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-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Crossfade
Aghjunghjite .carousel-fade
à u vostru carrusel per animate diapositive cù una transizione di dissolvenza invece di una diapositiva.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
.carousel-item
Intervallu individuale
Aghjunghjite data-bs-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-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">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-bs-touch
attributu. L'esempiu quì sottu ùn include micca ancu l' data-bs-ride
attributu è hà data-bs-interval="false"
cusì ùn hè micca autoplay.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Variante scura
Aghjunghjite .carousel-dark
à i .carousel
cuntrolli più scuri, indicatori è didascalie. I cuntrolli sò stati invertiti da u so riempimentu biancu predeterminatu cù a filter
pruprietà CSS. I sottotitoli è i cuntrolli anu variabili Sass addiziunali chì persunalizà l' color
e background-color
.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<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" data-bs-interval="2000">
<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-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
Transizione persunalizata
A durazione di a transizione .carousel-item
pò esse cambiata cù a $carousel-transition-duration
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
).
Sass
Variabili
$carousel-control-color: $white;
$carousel-control-width: 15%;
$carousel-control-opacity: .5;
$carousel-control-hover-opacity: .9;
$carousel-control-transition: opacity .15s ease;
$carousel-indicator-width: 30px;
$carousel-indicator-height: 3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer: 3px;
$carousel-indicator-opacity: .5;
$carousel-indicator-active-bg: $white;
$carousel-indicator-active-opacity: 1;
$carousel-indicator-transition: opacity .6s ease;
$carousel-caption-width: 70%;
$carousel-caption-color: $white;
$carousel-caption-padding-y: 1.25rem;
$carousel-caption-spacer: 1.25rem;
$carousel-control-icon-width: 2rem;
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");
$carousel-transition-duration: .6s;
$carousel-transition: transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Usu
Via attributi di dati
Aduprate l'attributi di dati per cuntrullà facilmente a pusizione di u carrusel. data-bs-slide
accetta e parolle chjave prev
o next
, chì altera a pusizione di slide relative à a so pusizione attuale. In alternativa, aduprate data-bs-slide-to
per passà un indice di diapositiva brutu à u carrusel data-bs-slide-to="2"
, chì cambia a pusizione di diapositiva à un indice particulari chì principia cù 0
.
L' data-bs-ride="carousel"
attributu hè utilizatu per marcà un carrusel cum'è animazione à partesi da a carica di a pagina. Se ùn aduprate micca data-bs-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ù:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Opzioni
L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-bs-
, cum'è in data-bs-interval=""
.
Nome | Tipu | Default | Descrizzione |
---|---|---|---|
interval |
numeru | 5000 |
A quantità di tempu per ritardà trà u ciclu automaticamente un articulu. Se false , u carrusel ùn serà micca automaticamente ciclu. |
keyboard |
booleanu | true |
Se u carrusel deve reagisce à l'avvenimenti di u teclatu. |
pause |
stringa | booleanu | 'hover' |
Se impostate à Nantu à i dispositi abilitati à u toccu, quandu si mette in |
ride |
stringa | booleanu | false |
Riproduce automaticamente u carrusel dopu chì l'utilizatore cicule manualmente u primu articulu. Se impostatu à 'carousel' , riproduce automaticamente u carrusel in carica. |
wrap |
booleanu | true |
Sia chì u carrusel duveria ciclu in modu continuu o avè tappe duru. |
touch |
booleanu | true |
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 .
Pudete creà una istanza di carrusel cù u custruttore di carrusel, per esempiu, per inizializà cù l'opzioni supplementari è cumincianu à ciclu per l'articuli:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Metudu | Descrizzione |
---|---|
cycle |
Cicli attraversu l'articuli di carrusel da manca à diritta. |
pause |
Impedisce à u carrusel di passà in bicicletta attraversu l'articuli. |
prev |
Cicli à l'articulu precedente. Ritorna à u chjamante prima chì l'elementu precedente hè statu mostratu (per esempiu, prima chì l' slid.bs.carousel avvenimentu si faci). |
next |
Cicli à u prossimu articulu. Ritorna à u chjamante prima chì l'elementu prossimu sia statu mostratu (per esempiu, prima chì l' slid.bs.carousel avvenimentu si faci). |
nextWhenVisible |
Ùn ciccate 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'articulu di destinazione hè statu mostratu |
to |
Cicla u carrusel à un quadru particulari (basatu 0, simile à un array). Ritorna à u chjamante prima chì l'elementu di destinazione hè statu mostratu (per esempiu, prima chì l' slid.bs.carousel avvenimentu si faci). |
dispose |
Distrughje un carrusel d'elementu. (Elimina i dati almacenati nantu à l'elementu DOM) |
getInstance |
Metudu staticu chì permette di ottene l'istanza di carousel assuciata à un elementu DOM, pudete aduprà cusì:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Metudu staticu chì torna una istanza di carrusel assuciata à un elementu DOM o crea un novu in casu ùn hè micca inizializatu. Pudete aduprà cusì:bootstrap.Carousel.getOrCreateInstance(element) |
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 di avvenimentu | Descrizzione |
---|---|
slide.bs.carousel |
Fire immediatamente quandu u slide metudu di istanza hè invucatu. |
slid.bs.carousel |
Sparatu quandu u carrusel hà finitu a so transizione di slide. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})