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

Per piacè esse cuscenti chì i carruselli 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ù 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.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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.

Prima etichetta di slide

Nulla vitae elit libero, a pharetra augue mollis interdum.

Seconda etichetta di slide

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Terza etichetta diapositiva

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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 class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </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>

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

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