in English

Carusel

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

Pe aceasta pagina

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.

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 o opțiune unică idpentru .carouselcomenzile opționale, mai ales dacă utilizați mai multe carusele pe o singură pagină. Elementele de control și indicator trebuie să aibă un data-bs-targetatribut (sau hrefpentru legături) care să se potrivească idcu .carouselelementul.

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-bs-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. Vă recomandăm să folosiți <button>elemente, dar puteți folosi și <a>elemente cu role="button".

<div id="carouselExampleControls" class="carousel slide" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Cu indicatori

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

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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

Un conținut reprezentativ de substituent pentru primul diapozitiv.

A doua etichetă a diapozitivei

Un conținut reprezentativ de substituent pentru al doilea diapozitiv.

Eticheta a treia diapozitiv

Un conținut reprezentativ de substituent pentru al treilea diapozitiv.

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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>Some representative placeholder content for the first slide.</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>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

`.carousel-item`Interval individual

Adăugați data-bs-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-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Dezactivați glisarea la atingere

Caruselurile acceptă glisarea spre stânga/dreapta pe dispozitivele cu ecran tactil pentru a vă deplasa între diapozitive. Acest lucru poate fi dezactivat folosind data-bs-touchatributul. De asemenea, exemplul de mai jos nu include data-bs-rideatributul și are data-bs-interval="false"astfel încât să nu se redă automat.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Varianta întunecată

Adăugați .carousel-darkla .carouselpentru controale, indicatoare și subtitrări mai întunecate. Controalele au fost inversate de la umplerea albă implicită cu filterproprietatea CSS. Subtitrările și controalele au variabile Sass suplimentare care personalizează colorși background-color.

Prima etichetă a diapozitivei

Un conținut reprezentativ de substituent pentru primul diapozitiv.

A doua etichetă a diapozitivei

Un conținut reprezentativ de substituent pentru al doilea diapozitiv.

Eticheta a treia diapozitiv

Un conținut reprezentativ de substituent pentru al treilea diapozitiv.

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</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>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Tranziție personalizată

Durata tranziției .carousel-itempoate fi modificată cu $carousel-transition-durationvariabila 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).

Sass

Variabile

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Utilizare

Prin atribute de date

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

Atributul data-bs-ride="carousel"este folosit pentru a marca un carusel ca animat începând cu încărcarea paginii. Dacă nu folosiți data-bs-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:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Opțiuni

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

Nume	Tip	Mod implicit	Descriere
`interval`	număr	`5000`	Durata de întârziere între trecerea automată pe bicicletă a unui articol. Dacă `false`, caruselul nu va rula automat.
`keyboard`	boolean	`true`	Dacă caruselul ar trebui să reacționeze la evenimentele de la tastatură.
`pause`	șir \| boolean	`'hover'`	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.
`ride`	șir \| boolean	`false`	Redă automat caruselul după ce utilizatorul ciclează manual primul articol. Dacă este setat la `'carousel'`, redă automat caruselul la încărcare.
`wrap`	boolean	`true`	Dacă caruselul ar trebui să circule continuu sau să aibă opriri grele.
`touch`	boolean	`true`	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 .

Puteți crea o instanță de carusel cu constructorul de carusel, de exemplu, pentru a inițializa cu opțiuni suplimentare și a începe să parcurgeți elemente:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
  interval: 2000,
  wrap: false
})

Metodă	Descriere
`cycle`	Parcurge articolele din carusel de la stânga la dreapta.
`pause`	Oprește caruselul să parcurgă articole.
`prev`	Se trece la articolul anterior. Revine la apelant înainte ca elementul anterior să fie afișat (de exemplu, înainte de apariția `slid.bs.carousel`evenimentului).
`next`	Se trece la articolul următor. Revine la apelant înainte ca următorul articol să fie afișat (de exemplu, înainte de apariția `slid.bs.carousel`evenimentului).
`nextWhenVisible`	Nu treceți de la carusel la următorul când pagina nu este vizibilă sau caruselul sau părintele său nu sunt vizibile. Revine la apelant înainte ca elementul țintă să fie afișat
`to`	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 (de exemplu, înainte de apariția `slid.bs.carousel`evenimentului).
`dispose`	Distruge caruselul unui element. (Elimină datele stocate pe elementul DOM)
`getInstance`	Metodă statică care vă permite să obțineți instanța carusel asociată unui element DOM, o puteți utiliza astfel:`bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	Metodă statică care returnează o instanță carusel asociată unui element DOM sau creează una nouă în cazul în care nu a fost inițializată. Îl poți folosi astfel:`bootstrap.Carousel.getOrCreateInstance(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.carousel`	Se declanșează imediat când `slide`este invocată metoda instanței.
`slid.bs.carousel`	Declanșat când caruselul și-a încheiat tranziția de alunecare.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

Carusel

Cum functioneaza

Exemplu

Numai diapozitive

Cu comenzi

Cu indicatori

Cu legende

Prima etichetă a diapozitivei

A doua etichetă a diapozitivei

Eticheta a treia diapozitiv

Fade încrucișată

.carousel-itemInterval individual

Dezactivați glisarea la atingere

Varianta întunecată

Prima etichetă a diapozitivei

A doua etichetă a diapozitivei

Eticheta a treia diapozitiv

Tranziție personalizată

Sass

Variabile

Utilizare

Prin atribute de date

Prin JavaScript

Opțiuni

Metode

Metode și tranziții asincrone

Evenimente

`.carousel-item`Interval individual