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

Efectul de animație al acestei componente depinde de prefers-reduced-motioninterogarea media. Consultați secțiunea cu mișcare redusă a documentației noastre de accesibilitate .

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

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

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

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.

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

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

Adăugați data-interval=""la a .carousel-itempentru a modifica timpul de întârziere între trecerea automată la următorul articol.

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

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. Dacă nu folosiți data-ride="carousel"pentru a inițializa caruselul, trebuie să-l inițializați singur. 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.
atingere boolean Adevărat Dacă caruselul ar trebui să accepte interacțiuni de glisare la stânga/dreapta pe dispozitivele cu ecran tactil.

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