Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
Check
in English

Carousel ƒe ƒuƒoƒo

Slide-ɖeɖefia ƒe akpa aɖe si wotsɔa kekeli toa nu veviwo me—nɔnɔmetatawo alo nuŋɔŋlɔwo ƒe slidewo—abe carousel ene.

Le axa sia dzi

Ale si wòwɔa dɔe

Carousel la nye slideshow na kekeli to emenyawo kplɔ wo nɔewo ɖo me, wotu kple CSS 3D tɔtrɔwo kple JavaScript vi aɖe. Ewɔa dɔ kple nɔnɔmetata, nuŋɔŋlɔ, alo dzesidenu siwo wowɔ ɖe ɖoɖo nu. Elɔ kpekpeɖeŋu nana dziɖuɖu siwo va yi/siwo kplɔe ɖo kple dzesiwo hã ɖe eme.

Le web-browser siwo me wodoa alɔ Page Visibility API la, carousel la aƒo asa na ʋuʋu ne webpage la mele dzedzem na ezãla o (abe ne browser tab la mele dɔ wɔm o, browser ƒe fesrea dzi ɖe kpɔtɔ, kple bubuawo ene).

Akpa sia ƒe nɔnɔmetata ƒe ŋusẽkpɔɖeamedzi nɔ te ɖe prefers-reduced-motionnyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .

Taflatse nyae be womedoa alɔ nested carousels o, eye zi geɖe la, carousels mewɔna ɖe mɔɖeɖe ƒe dzidzenuwo dzi o.

Kpɔɖeŋu

Carousels mewɔa slide ƒe didimewo wòsɔna ɖe ɖoɖo nu le wo ɖokui si o. Esi wòle alea ta la, ɖewohĩ ahiã be nàzã dɔwɔnu bubuwo alo atsyã siwo nèwɔ ɖe ɖoɖo nu atsɔ adzidze nyatakakawo ƒe lolome wòasɔ. Togbɔ be carousels doa alɔ dziɖuɖu kple dzesi siwo do ŋgɔ/si kplɔe ɖo hã la, womebia tso wo si tẽ o. Tsɔ kpe ɖe eŋu eye nàtrɔ asi le eŋu alesi nèkpɔe be esɔ.

Ele .activebe woatsɔ klass la akpe ɖe slideawo dometɔ ɖeka ŋu ne menye nenema o la, carousel la madze o. Azɔ hã kpɔ egbɔ be yeɖo tɔxɛ aɖe idɖe .carouselna tiatiawɔblɔɖe ƒe dziɖuɖuwo dzi, vevietɔ ne èle carousel geɖe zãm le axa ɖeka dzi. Ele be data-bs-targetnɔnɔme (alo hrefna kadodowo) nanɔ dziɖuɖu kple dzesi ƒe akpawo si si sɔ kple idakpaa .carouseltɔ.

Slides ɖeɖeko

Carousel si me slidewo koe le lae nye esi. .d-blockDe dzesii be kple le carousel nɔnɔmetatawo dzi ƒe anyinɔnɔ .w-100be nàxe mɔ ɖe browser ƒe nɔnɔmetatawo ƒe ɖoɖowɔwɔ ɖe ɖoɖo nu nu.

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>

Kple nusiwo dzi woaɖu

Tsɔ kpe ɖe dziɖuɖu siwo do ŋgɔ kple esiwo kplɔe ɖo ŋu. Míele aɖaŋu ɖom be nàzã <button>elements, gake àteŋu azã <a>elements kple 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>

Kple dzesiwo

Àte ŋu atsɔ dzesiawo hã akpe ɖe carousel la ŋu, kpe ɖe dziɖunuwo ŋu, hã.

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>

Kple nuŋɔŋlɔ siwo le ete

Tsɔ nyawo kpe ɖe wò slidewo ŋu bɔbɔe kple .carousel-captionelement si le ɖesiaɖe me .carousel-item. Woate ŋu aɣla wo bɔbɔe ɖe nukpɔkpɔ suewo dzi, abe alesi woɖee fia le ete ene, kple nukpɔkpɔ ƒe dɔwɔnu siwo woate ŋu atia . Míeɣlaa wo le gɔmedzedzea me kple .d-noneeye míegbugbɔa wo vaa mɔ̃ siwo lolo titina dzi kple .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 ƒe ƒuƒoƒo

Tsɔe kpe .carousel-fadeɖe wò carousel ŋu be nàna slidewo nawɔ agbe kple fade transition ɖe slide teƒe. Le wò carousel me nyawo nu (le kpɔɖeŋu me, nuŋɔŋlɔ ɖeɖeko ƒe slidewo), àteŋu atsɔ .bg-bodyalo CSS tɔxɛ aɖewo akpe ɖe .carousel-items la ŋu hena crossfading nyuie.

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>

Tsɔ kpe data-bs-interval=""ɖe a .carousel-itemŋu be nàtrɔ ɣeyiɣi si nàhe ɖe megbe le gasɔdodo le eɖokui si yi nu si kplɔe ɖo gbɔ dome.

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>

Tsɔ asikaka asikaka ŋu ƒe ʋuʋu ŋu dɔ

Carousels doa alɔ asiɖeɖe le miame/ɖusime le touchscreen-mɔ̃wo dzi be nàʋuʋu le slidewo dome. Woateŋu atɔ te esia to data-bs-touchnɔnɔmea zazã me. Kpɔɖeŋu si le ete hã metsɔ nɔnɔmea de data-bs-rideeme o eyata mewɔa autoplay o.

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>

Viviti ƒe tɔtrɔ

Tsɔ kpe .carousel-darkɖe eŋu .carouselhena dziɖuɖu siwo do viviti wu, dzesiwo, kple nuŋɔŋlɔwo. Wotrɔ dziɖuɖuwo tso woƒe ɣi yɔyɔ gbãtɔ me kple filterCSS ƒe nɔnɔme. Sass ƒe tɔtrɔ bubuwo le nuŋɔŋlɔwo kple dziɖuɖuwo ŋu siwo trɔa asi le colorkple 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>

Tɔtrɔ si wowɔ ɖe ɖoɖo nu

Woateŋu atrɔ tɔtrɔ ƒe ɣeyiɣi didime ƒe .carousel-itemkple $carousel-transition-durationSass ƒe tɔtrɔ hafi aƒo ƒu alo atsyã tɔxɛwo ne èle CSS si woƒo ƒu la zãm. Ne wowɔ tɔtrɔ geɖewo ŋudɔ la, kpɔ egbɔ be woɖe tɔtrɔ ƒe tɔtrɔa gɔme gbã (le kpɔɖeŋu me transition: transform 2s ease, opacity .5s ease-out).

Sass ƒe nyawo

Nusiwo trɔna

Nusiwo trɔna na carousels katã:

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

Nusiwo trɔna na viviti me carousel : .

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

Zãzã

To nyatakaka ƒe nɔnɔmewo dzi

Zã data attributes nàtsɔ akpɔ carousel la ƒe nɔƒe dzi bɔbɔe. data-bs-slidexɔa nya veviawo prevalo next, si trɔa slide ƒe nɔnɔme ne wotsɔe sɔ kple afisi wòle fifia. Alo zãe data-bs-slide-tonàtsɔ atsɔ slide index si womewɔ o la ayi carousel data-bs-slide-to="2"la gbɔ , si trɔa slide la ƒe nɔƒe ɖe index aɖe koŋ si dzea egɔme kple 0.

Wozãa data-bs-ride="carousel"nɔnɔmea tsɔ dea dzesi carousel be enye animating si dzea egɔme tso axa ƒe agbatsɔtsɔ dzi. Ne data-bs-ride="carousel"mèzãe tsɔ dze wò carousel gɔme o la, ele be wò ŋutɔ nàdze egɔme. Womateŋu azãe kpe ɖe (si mehiã o kple esi mehiã o) JavaScript gɔmedzedze si me kɔ le carousel ɖeka ma ke ŋu o.

To JavaScript dzi

Yɔ carousel kple asi kple:

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

Tiatiawɔblɔɖewo

Esi woateŋu atsɔ tiatiawɔnuwo ato nyatakaka nɔnɔmewo alo JavaScript dzi ta la, àteŋu atsɔ tiatia ŋkɔ akpe ɖe data-bs-, abe alesi wòle le data-bs-animation="{value}". Kpɔ egbɔ be yetrɔ tiatia ŋkɔa ƒe case type tso “ camelCase ” yi “ kebab-case ” ne èle tiatiaawo tom to data attributes dzi. Le kpɔɖeŋu me, zãe data-bs-custom-class="beautifier"ɖe data-bs-customClass="beautifier".

Tso Bootstrap 5.2.0 dzi la, akpaawo katã doa alɔ dodokpɔ ƒe nyatakaka si wodzra ɖo ƒe nɔnɔme data-bs-configsi ateŋu axɔ akpa ƒe ɖoɖo bɔbɔe abe JSON ka ene. Ne element aɖe si data-bs-config='{"delay":0, "title":123}'kple data-bs-title="456"nɔnɔmewo le la, asixɔxɔ mamlɛtɔ titleanye 456eye nyatakaka nɔnɔme vovovoawo axɔ asixɔxɔ siwo wona le data-bs-config. Tsɔ kpe ɖe eŋu la, nyatakaka ƒe nɔnɔme siwo li fifia te ŋu tsɔa JSON ƒe asixɔxɔwo abe data-bs-delay='{"show":0,"hide":150}'.

Ŋkɔ Ƒomevi Gᴐmedzeƒe Nuɖᴐɖᴐ
interval xexlẽdzesi 5000 Ɣeyiɣi agbɔsɔsɔme si woatsɔ ahe ɖe megbe le nu aɖe ƒe gasɔdodo le eɖokui si dome.
keyboard boolean ƒe ƒuƒoƒo true Nenye be ele be carousel la nawɔ nu ɖe ​​keyboard ƒe nudzɔdzɔwo ŋu.
pause ka, boolean "hover" Ne woɖoe ɖe "hover", tɔ te ʋufɔti la ƒe gasɔdodo ɖe edzi mouseentereye wògadze ʋufɔti la ƒe kekefɔfɔ gɔme le mouseleave. Ne èɖoe ɖe false, la, ne ètsɔe ɖo carousel la dzi la, madzudzɔe o. Le mɔ̃ siwo ŋu woate ŋu aka asi nu ɖo dzi la, ne woɖoe ɖe "hover", gasɔdodoa atɔ vie touchend(ne ezãla nya wɔ nu kple carousel la vɔ ko) hena dometsotso eve, hafi wòagadze egɔme le eɖokui si. Esia kpe ɖe mouse ƒe nuwɔna ŋu.
ride ka, boolean false Ne woɖoe ɖe true, aƒo carousel la le eɖokui si ne ezãla tsɔ asi ƒo nu gbãtɔa vɔ. Ne woɖoe ɖe "carousel", eƒoa carousel la le eɖokui si le agba me.
touch boolean ƒe ƒuƒoƒo true Nenye be ele be carousel la nado alɔ miame/ɖusime swipe ƒe kadodowo le touchscreen-mɔ̃wo dzi.
wrap boolean ƒe ƒuƒoƒo true Nenye be ele be carousel la nanɔ gasɔ tsam atraɖii alo be wòatɔ sesĩe.

Mɔnuwo

Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo

API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .

Kpɔ míaƒe JavaScript nuŋlɔɖiwo hena nyatakaka bubuwo .

Àteŋu awɔ carousel ƒe kpɔɖeŋu kple carousel xɔtula, le kpɔɖeŋu me, be nàdze egɔme kple tiatia bubuwo eye nàdze gasɔdodo gɔme to nuawo me:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Nuwɔmɔnu Nuɖᴐɖᴐ
cycle Tsitsatsa to carousel-nuawo me tso miame yi ɖusime.
dispose Egblẽa nu le element aɖe ƒe carousel ŋu. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa)
getInstance Static mɔnu si ɖea mɔ na wò be nàxɔ carousel ƒe kpɔɖeŋu si do ƒome kple DOM element aɖe, àteŋu azãe ale: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Static mɔnu si trɔa carousel ƒe kpɔɖeŋu si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale: bootstrap.Carousel.getOrCreateInstance(element).
next Tsitre ɖe nu si kplɔe ɖo ŋu. Trɔ yi amesi yɔe gbɔ hafi woɖe nusi kplɔe ɖo fia (le kpɔɖeŋu me, hafi slid.bs.carouselnudzɔdzɔa nadzɔ).
nextWhenVisible Mègatsɔ gasɔ na carousel ayi next ne axaa mele dzedzem o alo carousel la alo edzila mele dzedzem o. Trɔ yi amesi ƒo ka na gbɔ hafi woɖe nusi woɖo taɖodzinu na la fia .
pause Exea mɔ na carousel la be wòagazɔ to nuwo me o.
prev Tsitre ɖe nusi do ŋgɔ ŋu. Trɔ yi ame si yɔe gbɔ hafi woɖe nusi do ŋgɔ la fia (le kpɔɖeŋu me, hafi slid.bs.carouselnudzɔdzɔa nadzɔ).
to Trɔ carousel la ɖe frame aɖe koŋ dzi (0 si wotu ɖe edzi, si sɔ kple array). Trɔ yi ame si yɔe gbɔ hafi woɖe nusi woɖo taɖodzinu na la fia (le kpɔɖeŋu me, hafi slid.bs.carouselnudzɔdzɔa nadzɔ).

Nudzɔdzɔwo

Bootstrap ƒe carousel klass ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel dɔwɔwɔ me. Nɔnɔme bubu siwo gbɔna la le nudzɔdzɔ eveawo siaa ŋu:

  • direction: Mɔ si dzi carousel la le ʋuʋum ɖo ( "left"alo alo "right").
  • relatedTarget: DOM ƒe akpa si wole ʋuʋum ɖe teƒea abe nu si le dɔ wɔm ene.
  • from: Nusi li fifia ƒe index
  • to: Nu si kplɔe ɖo ƒe index

Wodaa tu carousel nudzɔdzɔwo katã ɖe carousel la ŋutɔ dzi (si nye le <div class="carousel">).

Nudzɔdzɔ ƒomevi Nuɖᴐɖᴐ
slid.bs.carousel Wodoa dzoe ne carousel la wu eƒe slide ƒe tɔtrɔ nu.
slide.bs.carousel Dzoa enumake ne woyɔ slidekpɔɖeŋu mɔnu la. 
const myCarousel = document.getElementById('myCarousel')

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