Passà à u cuntenutu principale Salta à a navigazione di documenti
Check
in English

Carrusel

Un cumpunente di slideshow per andà in bicicletta attraversu elementi-imaghjini o diapositive di testu-cum'è un carrusel.

In sta pagina

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.).

L'effettu di l'animazione di stu cumpunente dipende da a prefers-reduced-motionmedia 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 .activeclassa deve esse aghjuntu à una di e diapositive altrimenti u carrusel ùn serà micca visibile. Assicuratevi ancu di stabilisce un unicu idper i .carouselcuntrolli opzionali, soprattuttu s'è vo aduprate parechje carrusels in una sola pagina. L'elementi di cuntrollu è indicatori devenu avè un data-bs-targetattributu (o hrefper ligami) chì currisponde à idl' .carouselelementu.

Solu diapositive

Eccu un carrusel cù diapositive solu. Nota a prisenza di l' imaghjini .d-blockè .w-100nantu à u carrusel per impedisce l'allineamentu di l'imaghjini predeterminati di u navigatore.

html 
<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".

html 
<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.

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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-captionelementu 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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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. Sicondu u vostru cuntenutu di carousel (per esempiu, diapositive di testu solu), pudete vulete aghjunghje .bg-bodyo qualchì CSS persunalizatu à u .carousel-items per un crossfading propiu.

html 
<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>

Aghjunghjite data-bs-interval=""à a .carousel-itemper cambià a quantità di tempu per ritardà trà u ciculu automaticamente à u prossimu articulu.

html 
<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-touchattributu. L'esempiu quì sottu ùn include micca ancu l' data-bs-rideattributu per quessa ùn hè micca autoplay.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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 .carouselcuntrolli più scuri, indicatori è didascalie. I cuntrolli sò stati invertiti da u so riempimentu biancu predeterminatu cù a filterpruprietà CSS. I sottotitoli è i cuntrolli anu variabili Sass addiziunali chì persunalizà l' colore background-color.

html 
<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-itempò esse cambiata cù a $carousel-transition-durationvariabile 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

Variabili per tutti i carousels:

$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`)

Variabili per u carousel scuru :

$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-slideaccetta e parolle chjave prevo next, chì altera a pusizione di slide relative à a so pusizione attuale. In alternativa, aduprate data-bs-slide-toper 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ù:

const carousel = new bootstrap.Carousel('#myCarousel')

Opzioni

Siccomu l'opzioni ponu esse passati via attributi di dati o JavaScript, pudete appiccicà un nome d'opzione à data-bs-, cum'è in data-bs-animation="{value}". Assicuratevi di cambià u tipu di casu di u nome di l'opzione da " camelCase " à " kebab-case " quandu passanu l'opzioni via attributi di dati. Per esempiu, aduprà data-bs-custom-class="beautifier"invece di data-bs-customClass="beautifier".

A partire da Bootstrap 5.2.0, tutti i cumpunenti supportanu un attributu di dati riservatu sperimentaledata-bs-config chì pò accoglie una cunfigurazione di cumpunenti simplice cum'è una stringa JSON. Quandu un elementu hà data-bs-config='{"delay":0, "title":123}'è data-bs-title="456"attributi, u valore finali titleserà 456è l'attributi di dati separati anu da annullà i valori dati nantu à data-bs-config. Inoltre, l'attributi di dati esistenti sò capaci di allughjà valori JSON cum'è data-bs-delay='{"show":0,"hide":150}'.

Nome Tipu Default Descrizzione
interval numeru 5000 A quantità di tempu per ritardà trà u ciclu automaticamente un articulu.
keyboard booleanu true Se u carrusel deve reagisce à l'avvenimenti di u teclatu.
pause stringa, booleanu "hover" Se impostate à "hover", mette in pausa u ciclu di u carrusel mouseenterè ripiglià u ciculu di u carrusel mouseleave. Se hè impostatu à false, u passaghju sopra u carrusel ùn mette micca in pausa. Nantu à i dispositi abilitati à u toccu, quandu si mette in "hover", u ciclismu si mette in pausa touchend(una volta chì l'utilizatore hà finitu di interagisce cù u carrusel) per dui intervalli, prima di ripiglià automaticamente. Questu hè in più di u cumpurtamentu di u mouse.
ride stringa, booleanu false Se hè impostatu à true, riproduce automaticamente u carrusel dopu chì l'utilizatore ciculu manualmente u primu articulu. Se impostatu à "carousel", riproduce automaticamente u carrusel in carica.
touch booleanu true Se u carrusel duveria sustene l'interazzione di scorri à sinistra / destra in i dispositi touchscreen.
wrap booleanu true Sia chì u carrusel duveria ciclu in modu continuu o avè tappe duru.

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:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metudu Descrizzione
cycle Cicli attraversu l'articuli di carrusel da manca à diritta.
dispose Distrughje un carrusel d'elementu. (Elimina i dati almacenati nantu à l'elementu DOM)
getInstance Metudu staticu chì permette di ottene l'istanza di carrusel 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 creanu un novu in casu ùn hè micca inizializatu. Pudete aduprà cusì: bootstrap.Carousel.getOrCreateInstance(element).
next Cicli à u prossimu articulu. Ritorna à u chjamante prima chì l'elementu prossimu sia statu mostratu (per esempiu, prima chì l' slid.bs.carouselavvenimentu 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 .
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.carouselavvenimentu si faci).
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.carouselavvenimentu 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 attuale
  • to: 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
slid.bs.carousel Sparatu quandu u carrusel hà finitu a so transizione di slide.
slide.bs.carousel Fire immediatamente quandu u slidemetudu di istanza hè invucatu. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})