Source

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

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

Solu diapositive

Eccu un carrusel cù solu slides. Nota a prisenza di l' imaghjini .d-blockè .w-100nantu à 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:

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

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

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.

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Aghjunghjite data-interval=""à a .carousel-itemper 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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" 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="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Usu

Via attributi di dati

Aduprate l'attributi di dati per cuntrullà facilmente a pusizione di u carrusel. data-slideaccetta e parolle chjave prevo next, chì altera a pusizione di slide relative à a so pusizione attuale. In alternativa, aduprate data-slide-toper 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. S'ellu hè falsu, 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 à "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. Nota chì questu hè in più di u cumpurtamentu di u mouse sopra.
cavalcà stringa falsu Riproduce automaticamente u carrusel dopu chì l'utilizatore cicule manualmente u primu articulu. Se "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.carouselavvenimentu 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.carouselavvenimentu).

.carousel('next')

Cicli à u prossimu articulu. Ritorna à u chjamante prima chì l'elementu prossimu sia statu mostratu (vale à dì prima chì l' slid.bs.carouselavvenimentu si faci).

.carousel('dispose')

Distrughje un carrusel d'elementu.

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 d'avvenimentu Descrizzione
slide.bs.carousel Questu avvenimentu spara immediatamente quandu u slidemetudu 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-itempò esse cambiata cù a $carousel-transitionvariabile 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).