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

Assicuratevi di stabilisce un id unicu nantu à i .carouselcuntrolli opzionali, soprattuttu s'è vo aduprate parechje carrusels in una sola pagina.

Solu diapositive

Eccu un carrusel cù diapositive solu. Nota a prisenza di l' imaghjini .d-blockè .img-fluidnantu à 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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Cù cuntrolli

Aghjunghjendu i cuntrolli precedenti è successivi:

Previous Dopu

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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.

Previous Dopu

<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="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." 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.

Previous Dopu

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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="".

I metudi

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})