Source

Carusel

O componentă de prezentare de diapozitive pentru parcurgerea elementelor - imagini sau diapozitive de text - ca un carusel.

Cum functioneaza

Caruselul este o prezentare de diapozitive pentru a parcurge o serie de conținut, construit cu transformări CSS 3D și puțin JavaScript. Funcționează cu o serie de imagini, text sau markup personalizat. Include, de asemenea, suport pentru controalele și indicatorii anterioare/următoare.

În browserele în care API-ul de vizibilitate a paginii este acceptat, caruselul va evita alunecarea atunci când pagina web nu este vizibilă pentru utilizator (cum ar fi atunci când fila browserului este inactivă, fereastra browserului este minimizată etc.).

Vă rugăm să rețineți că caruselele imbricate nu sunt acceptate și, în general, caruselele nu sunt conforme cu standardele de accesibilitate.

În cele din urmă, dacă construiți JavaScript din sursă, necesităutil.js .

Exemplu

Caruselele nu normalizează automat dimensiunile diapozitivelor. Ca atare, poate fi necesar să utilizați utilități suplimentare sau stiluri personalizate pentru a dimensiona în mod corespunzător conținutul. Deși caruselele acceptă controalele și indicatorii anterioare/următoare, acestea nu sunt necesare în mod explicit. Adăugați și personalizați după cum credeți de cuviință.

Clasa .activetrebuie adăugată la unul dintre diapozitive, altfel caruselul nu va fi vizibil. De asemenea, asigurați-vă că setați un ID unic .carouselpentru comenzile opționale, mai ales dacă utilizați mai multe carusele pe o singură pagină. Elementele de control și indicator trebuie să aibă un data-targetatribut (sau hrefpentru linkuri) care să se potrivească cu id-ul .carouselelementului.

Numai diapozitive

Iată un carusel doar cu diapozitive. Rețineți prezența imaginilor .d-blockși .w-100pe carusel pentru a preveni alinierea implicită a imaginilor din browser.

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

Cu comenzi

Adăugarea controalelor anterioare și următoare:

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

Cu indicatori

De asemenea, puteți adăuga indicatorii în carusel, alături de comenzi.

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

Cu legende

Adăugați cu ușurință subtitrări la diapozitive cu .carousel-captionelementul din orice .carousel-item. Acestea pot fi ascunse cu ușurință pe ferestrele de vizualizare mai mici, așa cum se arată mai jos, cu utilitare opționale de afișare . Le ascundem inițial cu .d-noneși le aducem înapoi pe dispozitive de dimensiuni medii cu .d-md-block.

Prima etichetă a diapozitivei

Nulla vitae elit libero, a pharetra augue mollis interdum.

A doua etichetă a diapozitivei

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Eticheta a treia diapozitiv

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>

Fade încrucișată

Adăugați .carousel-fadeîn carusel pentru a anima diapozitivele cu o tranziție de estompare în loc de un diapozitiv.

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

Utilizare

Prin atribute de date

Utilizați atributele de date pentru a controla cu ușurință poziția caruselului. data-slideacceptă cuvintele cheie prevsau next, care modifică poziția diapozitivului în raport cu poziția curentă. Ca alternativă, utilizați data-slide-topentru a transmite un index de diapozitiv brut la carusel data-slide-to="2", care schimbă poziția de diapozitiv la un anumit index începând cu 0.

Atributul data-ride="carousel"este folosit pentru a marca un carusel ca animat începând cu încărcarea paginii. Nu poate fi utilizat în combinație cu inițializarea JavaScript explicită (redundantă și inutilă) a aceluiași carusel.

Prin JavaScript

Apelați manual caruselul cu:

$('.carousel').carousel()

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-interval="".

Nume	Tip	Mod implicit	Descriere
interval	număr	5000	Durata de întârziere între trecerea automată pe bicicletă a unui articol. Dacă este fals, caruselul nu va rula automat.
tastatură	boolean	Adevărat	Dacă caruselul ar trebui să reacționeze la evenimentele de la tastatură.
pauză	șir \| boolean	"planare"	Dacă este setat la `"hover"`, întrerupe ciclul caruselului pornit `mouseenter`și reia ciclul caruselului pornit `mouseleave`. Dacă este setat la `false`, trecerea cursorului peste carusel nu îl va întrerupe. Pe dispozitivele compatibile cu atingere, când este setată la `"hover"`, ciclismul se va întrerupe `touchend`(după ce utilizatorul a terminat de interacționat cu caruselul) timp de două intervale, înainte de a se relua automat. Rețineți că acest lucru este în plus față de comportamentul mouse-ului de mai sus.
plimbare	şir	fals	Redă automat caruselul după ce utilizatorul ciclează manual primul articol. Dacă „carusel”, redă automat caruselul la încărcare.
înfășura	boolean	Adevărat	Dacă caruselul ar trebui să circule continuu sau să aibă opriri grele.

Metode

Metode și tranziții asincrone

Toate metodele API sunt asincrone și încep o tranziție . Ei revin la apelant imediat ce tranziția este începută, dar înainte ca aceasta să se încheie . În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

Consultați documentația noastră JavaScript pentru mai multe informații.

`.carousel(options)`

Inițializează caruselul cu opțiuni opționale objectși începe să parcurgă articole.

$('.carousel').carousel({
  interval: 2000
})

`.carousel('cycle')`

Parcurge articolele din carusel de la stânga la dreapta.

`.carousel('pause')`

Oprește caruselul să parcurgă articole.

`.carousel(number)`

Ciclulează caruselul la un anumit cadru (bazat pe 0, similar cu o matrice). Se întoarce la apelant înainte ca elementul țintă să fie afișat (adică înainte de apariția slid.bs.carouselevenimentului).

`.carousel('prev')`

Se trece la articolul anterior. Revine la apelant înainte ca elementul anterior să fie afișat (adică înainte de apariția slid.bs.carouselevenimentului).

`.carousel('next')`

Se trece la articolul următor. Revine la apelant înainte ca următorul articol să fie afișat (adică înainte de apariția slid.bs.carouselevenimentului).

`.carousel('dispose')`

Distruge caruselul unui element.

Evenimente

Clasa carusel a lui Bootstrap expune două evenimente pentru conectarea la funcționalitatea carusel. Ambele evenimente au următoarele proprietăți suplimentare:

direction: Direcția în care alunecă caruselul (fie "left"sau "right").
relatedTarget: elementul DOM care este alunecat în poziție ca element activ.
from: indexul articolului curent
to: indexul articolului următor

Toate evenimentele carusel sunt declanșate la carusel în sine (adică la <div class="carousel">).

Tip de eveniment	Descriere
slide.bs.carusel	Acest eveniment se declanșează imediat când `slide`este invocată metoda instanței.
alunecare.bs.carusel	Acest eveniment este declanșat când caruselul și-a încheiat tranziția de diapozitiv.

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

Modificați durata tranziției

Durata tranziției .carousel-itempoate fi modificată cu $carousel-transitionvariabila Sass înainte de compilare sau stiluri personalizate dacă utilizați CSS-ul compilat. Dacă sunt aplicate mai multe tranziții, asigurați-vă că tranziția de transformare este definită mai întâi (de ex. transition: transform 2s ease, opacity .5s ease-out).