Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

Carrousel ya kosala

Eteni ya kolakisa diaporama mpo na kotambola na velo na kati ya biloko —bililingi to diapositive ya makomi —lokola carrousel.

Na lokasa oyo

Ndenge oyo esalaka

Carrousel ezali diaporama mpo na kosala cyclisme na nzela ya série ya contenus, etongami na ba transformations CSS 3D mpe mwa JavaScript. Esalaka na molɔngɔ́ ya bililingi, makomi, to bilembo oyo esalemi na kolanda bamposa ya moto. Ezali pe na lisungi ya ba contrôles ya kala/ya sima pe ba indicateurs.

Na ba navigateurs esika API ya Visibilité ya Lokasa esungami, carrousel ekoboya ko glisser tango page web ezali komonana te na mosaleli (lokola tango onglet ya navigateur ezali inactif, fenêtre ya navigateur ezali minimisé, etc.).

Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

Svp yeba ete ba carrousels encastrés esungami te, mpe ba carrousels ezali généralement na boyokani te na ba normes ya accessibilité.

Ndakisa

Ba carousels e normaliser automatiquement ba dimensions ya diapositive te. Lokola ezali bongo, ekoki kozala ete osengeli kosalela ba utilitaires mosusu to ba styles personnalisés mpo na kopesa bonene ya makambo oyo ebongi. Alors que ba carrousels ezo soutenir ba contrôles ya kala/ya sima pe ba indicateurs, esengeli te explicitement. Bakisa mpe salá yango ndenge omoni ete ebongi.

Esengeli .activekobakisa kelasi na moko ya ba diapositives soki te carousel ekozala komonana te. Lisusu sala makasi ya kotya unique idna .carouselmpo na ba contrôles optionnels, surtout soki ozali kosalela ba carousels ebele na page moko. Ba éléments ya contrôle na indicateur esengeli ezala na data-bs-targetattribut (to hrefpona ba liens) oyo ekokani na idya .carouselélément.

Ba diapositives kaka

Tala carousel na ba diapositives kaka. Yeba présence ya .d-blockmpe .w-100na bilili ya carrousel mpo na kopekisa alignment ya bilili ya navigateur par défaut.

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>

Na ba contrôles

Kobakisa na ba contrôles ya liboso mpe oyo elandi. Tosengi kosalela <button>ba éléments, kasi okoki pe kosalela <a>ba éléments na 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>

Na ba indicateurs

Okoki pe kobakisa ba indicateurs na carrousel, pembeni ya ba contrôles, pe.

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>

Na ba captions

Bakisa ba captions na ba diapositives na yo facilement na .carousel-captionélément na kati ya nionso .carousel-item. Bakoki kobomba yango kozanga mpasi na bisika ya kotala ya mikemike, ndenge emonisami awa na nse, na ba utilitaires ya kolakisa oyo okoki kopona . Tobombaka bango na ebandeli na .d-nonempe tozongisaka yango na baaparɛyi ya monene na .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>

Crossfade ya kosala

Bakisa .carousel-fadena carousel na yo mpo na ko animer ba diapositives na transition ya fade na esika ya diapositive. Na kotalela makambo ya carousel na yo (ndakisa, ba diapositives ya makomi kaka), okoki kobakisa .bg-bodyto mwa CSS ya momesano na .carousel-items mpo na kosala crossfading malamu.

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>

Bakisa data-bs-interval=""na a .carousel-itemmpo na kobongola ntango ya kozongisa nsima kati na kokende na velo na ndenge ya automatique na eloko oyo elandi.

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>

Désactiver ko toucher swiping

Ba carousels esalisaka ko swiping gauche/droite na ba appareils tactile pona ko tambola entre ba diapositives. Yango ekoki kozala désactivé na kosalelaka data-bs-touchattribut. Ndakisa oyo ezali awa na se ezali mpe na data-bs-rideattribut te yango wana esala autoplay te.

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>

Variante ya molili

Bakisa .carousel-darkna .carouselmpo na ba contrôles ya molili, ba indicateurs, mpe ba captions. Ba contrôles e inversé na remplissage na bango ya pembe par défaut na filterpropriété CSS. Ba captions na ba contrôles ezali na ba variables ya Sass ya kobakisa oyo e personnaliser ba colorna 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>

Transition ya momesano

Durée ya transition ya .carousel-itemekoki ko changer na $carousel-transition-durationvariable Sass avant ya compilation to ba styles personnalisés soki ozali kosalela CSS compilé. Soki ba transitions ebele esalelami, sala que transition ya transformation elimbolama liboso (ndakisa transition: transform 2s ease, opacity .5s ease-out).

Sass oyo azali

Ba variables oyo ezali

Ba variables pona ba carrusel nionso:

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

Variables mpo na carrousel ya molili :

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

Kosalela yango

Na nzela ya ba attributs ya ba données

Salelá ba attributs ya ba données mpo na ko contrôler facilement position ya carrousel. data-bs-slideendimaka maloba ya ntina prevto next, oyo ebongoli esika ya diapositive na kotalela esika oyo ezali sikoyo. Na lolenge mosusu, salelá data-bs-slide-tompo na koleka index ya diapositive brut na carousel data-bs-slide-to="2", oyo ebongoli esika ya diapositive na index moko boye oyo ebandi na 0.

Attribut data-bs-ride="carousel"esalelamaka mpo na kotya elembo na carousel lokola animateur kobanda na chargement ya lokasa. Soki osalelaka te data-bs-ride="carousel"pona ko initialiser carrousel nayo, il faut o initialiser yango yo moko. Ekoki kosalelama te elongo na (redundante mpe oyo ezali na ntina te) initialisation explicite ya JavaScript ya carousel moko.

Na nzela ya JavaScript

Benga carousel na maboko na:

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

Makambo oyo okoki kopona

Lokola ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript, okoki kobakisa kombo ya option na data-bs-, lokola na data-bs-animation="{value}". Sala makasi o changer type ya cas ya kombo ya option depuis “ camelCase ” na “ kebab-case ” tango ozali koleka ba options via ba attributs ya ba données. Na ndakisa, salelá data-bs-custom-class="beautifier"na esika ya data-bs-customClass="beautifier".

Kobanda na Bootstrap 5.2.0, ba composants nionso esungaka attribut ya ba données réservées expérimentalesdata-bs-config oyo ekoki ko louer configuration ya composant simple lokola chaîne JSON. Tango élément moko ezali data-bs-config='{"delay":0, "title":123}'na na ba data-bs-title="456"attributs, valeur ya suka titleekozala 456mpe ba attributs ya ba données separates eko overrider ba valeurs oyo epesami na data-bs-config. En plus, ba attributs ya ba données oyo ezali ezali capable ya ko louer ba valeurs JSON lokola data-bs-delay='{"show":0,"hide":150}'.

Nkombo Lolenge Mbeba Ndimbola
interval nimero 5000 Motango ya ntango oyo esengeli kozongisa nsima kati na kotambola na velo na eloko moko na ndenge ya automatique.
keyboard boolean true Soki carousel esengeli e réagir na ba événements ya clavier.
pause molongo, boolean "hover" Soki otie yango na "hover", ezo pause na cycle ya carrousel na mouseenterpe ezongelaka cycle ya carousel na mouseleave. Soki otye yango na false, kopumbwa likoló ya carousel ekopemisa yango te. Na ba appareils oyo ekoki ko toucher, soki otie yango na "hover", cyclisme ekozala pause na touchend(ntango mosaleli asili kosala interaction na carousel) na boumeli ya ba intervalles mibale, liboso ya kozongela automatiquement. Yango ezali en plus ya comportement ya souris.
ride molongo, boolean false Soki otye yango na true, ekobeta yango moko carousel nsima wana mosaleli azali kosala cycle na mabɔkɔ na eloko ya liboso. Soki otye yango na "carousel", ekobeta yango moko carousel na chargement.
touch boolean true Soki carrousel esengeli ko soutenir ba interactions ya swipe gauche/droite na ba appareils ya écran tactile.
wrap boolean true Ezala carrousel esengeli kosala cycle continuellement to kozala na ba arrêts ya makasi.

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

Okoki kosala instance ya carrousel na constructeur ya carrousel, ndakisa, mpo na ko initialiser na ba options ya kobakisa mpe kobanda kosala cycle na nzela ya biloko:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Metode Ndimbola
cycle Ezali kosala cycle na kati ya biloko ya carrousel kobanda na lobɔkɔ ya mwasi tii na lobɔkɔ ya mobali.
dispose Ebebisaka carrousel ya élément moko. (Elongolaka ba données oyo ebombami na élément DOM)
getInstance Méthode statique oyo e permettre yo ozua instance ya carrousel associé na élément DOM, okoki kosalela yango boye: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Méthode statique oyo ezongisaka instance ya carrousel oyo ezo sangana na élément DOM to ezo sala ya sika au cas où ezalaki initialisé te. Okoki kosalela yango boye: bootstrap.Carousel.getOrCreateInstance(element).
next Ezali kosala ba cycles tii na eloko oyo elandi. Ezongi na mobengi yambo eloko oyo elandi elakisami (ndakisa, yambo slid.bs.carousellikambo esalema).
nextWhenVisible Kosala cycle carousel te na next tango page ezali komonana te to carrousel to parent na yango ezali komonana te. Ezongi na moto oyo abengi liboso ete eloko oyo olingi elakisama .
pause Epekisaka carrousel ekende na velo na nzela ya biloko.
prev Ba cycles na eloko oyo eleki. Ezongi na mobengi yambo eloko ya liboso elakisami (ndakisa, yambo slid.bs.carousellikambo esalema).
to Ezali kosala cycle ya carousel na cadre moko boye (0 basé, ndenge moko na array). Ezongi na mobengi yambo eloko oyo olingi elakisama (ndakisa, yambo slid.bs.carousellikambo esalema).

Makambo oyo esalemaki

Classe ya carrousel ya Bootstrap e exposer deux événements pona ko crochet na fonctionnalité ya carrousel. Ba événements nionso mibale ezali na ba propriétés ya kobakisa oyo elandi:

  • direction: Nzela oyo carrousel ezali kogumbama (soit "left"to "right").
  • relatedTarget: Elemento ya DOM oyo ezali ko glisser na esika lokola eloko ya active.
  • from: Index ya eloko oyo ezali sikoyo
  • to: Index ya eloko oyo elandi

Ba événements nionso ya carrousel ebetamaka na carrousel yango moko (c.a.d. na <div class="carousel">).

Lolenge ya likambo Ndimbola
slid.bs.carousel Ebetami ntango carousel esili kosala transition na yango ya diapositive.
slide.bs.carousel Ezo benga mbala moko tango slideméthode ya instance ezo invoquer. 
const myCarousel = document.getElementById('myCarousel')

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