Treci la conținutul principal Treceți la navigarea documentelor
Check
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.

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

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

html 
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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.

html 
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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. În funcție de conținutul caruselului dvs. (de exemplu, diapozitive numai text), este posibil să doriți să adăugați .bg-bodysau unele CSS personalizate la .carousel-items pentru o încrucișare adecvată.

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

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

html 
<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, așa că nu se redă automat.

html 
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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.

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

Variabile pentru toate caruselele:

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

Variabile pentru caruselul întunecat :

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

const carousel = new bootstrap.Carousel('#myCarousel')

Opțiuni

Deoarece opțiunile pot fi transmise prin atribute de date sau JavaScript, puteți adăuga un nume de opțiune la data-bs-, ca în data-bs-animation="{value}". Asigurați-vă că schimbați tipul de caz al numelui opțiunii din „ camelCase ” în „ kebab-case ” atunci când treceți opțiunile prin atributele de date. De exemplu, utilizați data-bs-custom-class="beautifier"în loc de data-bs-customClass="beautifier".

Începând cu Bootstrap 5.2.0, toate componentele acceptă un atribut de date rezervat experimentaldata-bs-config care poate găzdui configurarea simplă a componentelor ca șir JSON. Când un element are data-bs-config='{"delay":0, "title":123}'și data-bs-title="456"atribute, valoarea finală titleva fi 456și atributele de date separate vor înlocui valorile date pe data-bs-config. În plus, atributele de date existente pot găzdui valori JSON precum data-bs-delay='{"show":0,"hide":150}'.

Nume Tip Mod implicit Descriere
interval număr 5000 Durata de întârziere între trecerea automată pe bicicletă a unui articol.
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. Acest lucru este în plus față de comportamentul mouse-ului.
ride șir, boolean false Dacă este setată la true, redă automat caruselul după ce utilizatorul parcurge manual primul articol. Dacă este setat la "carousel", redă automat caruselul la încărcare.
touch boolean true Dacă caruselul ar trebui să accepte interacțiuni de glisare la stânga/dreapta pe dispozitivele cu ecran tactil.
wrap boolean true 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 .

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:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metodă Descriere
cycle Parcurge articolele din carusel de la stânga la dreapta.
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).
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.carouselevenimentului).
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 .
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.carouselevenimentului).
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.carouselevenimentului).

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
slid.bs.carousel Declanșat când caruselul și-a încheiat tranziția de alunecare.
slide.bs.carousel Se declanșează imediat când slideeste invocată metoda instanței. 
const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})