Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

Xigwitsirisi

Xiphemu xa nkombiso wa swilayidi xo rhendzeleka hi swiaki—swifaniso kumbe swilayidi swa tsalwa—ku fana ni carousel.

Eka tluka leri

Ndlela leyi swi tirhaka ha yona

Carousel i nkombiso wa swilayidi wo rhendzeleka hi ku tirhisa nxaxamelo wa swilo leswi nga endzeni, lowu akiweke hi ku hundzuka ka CSS 3D na xiphemu xa JavaScript. Yi tirha hi nxaxamelo wa swifaniso, tsalwa kumbe ku fungha loku endleriweke wena. Yi tlhela yi katsa nseketelo wa vulawuri bya khale/leswi landzelaka na swikombiso.

Eka swihlamusela-marito laha API ya ku Vonakala ka Tluka yi seketeriwaka, carousel yi ta papalata ku rhetela loko tluka ra webu ri nga vonaki eka mutirhisi (ku fana na loko thebhu ya xihlamusela-marito yi nga tirhi, fasitere ra xihlamusela-marito ri hungutiwile, na swin’wana).

Vuyelo bya animation bya xiphemu lexi byi titshege hi prefers-reduced-motionxivutiso xa midiya. Vona xiyenge xa ​​ku famba loku hungutiweke xa matsalwa ya hina ya ku fikelela .

Hi kombela u tiva leswaku ti carousels leti nga na swisaka a ti seketeriwi, naswona ti carousels hi ntolovelo a ti fambisani na swipimelo swa ku fikelela.

Xikombiso

Ti carousels a ti tiendli ti normalize ti slide dimensions. Hi ndlela yoleyo, u nga ha lava ku tirhisa switirhisiwa leswi engetelekeke kumbe switayele swa ntolovelo leswaku u pima swilo leswi nga endzeni hi ndlela leyi faneleke. Loko ti carousels ti seketela vulawuri bya khale/lebyi landzelaka na swikombiso, a swi laveki hi ku kongoma. Engetelani u tlhela u endla hi ku landza swilaveko swa wena hilaha u vonaka swi fanerile hakona.

Tlilasi .activeyi lava ku engeteriwa eka yin’wana ya tislaydi handle ka sweswo carousel a yi nge vonaki. Nakambe tiyiseka leswaku u veka yo hlawuleka ideka ya .carouselvulawuri lebyi nga hlawuriwa, ngopfu-ngopfu loko u tirhisa ti- carousel to tala eka tluka rin’we. Swiaki swa vulawuri na xikombiso swi fanele ku va na data-bs-targetxihlawulekisi (kumbe hrefxa swihlanganisi) lexi fambelanaka na idxa .carouselxiaki.

Swilayidi ntsena

Hi leyi carousel leyi nga na swilayidi ntsena. Xiya vukona bya .d-blockna .w-100eka swifaniso swa carousel ku sivela ku ringanisiwa ka swifaniso swa xiviri swa 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>

Hi swilawuri

Ku engetela eka vulawuri lebyi hundzeke na lebyi landzelaka. Hi ringanyeta ku tirhisa <button>swiaki, kambe u nga ha tlhela u tirhisa <a>swiaki leswi nga 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>

Hi swikombiso

U nga ha tlhela u engetela swikombiso eka carousel, etlhelo ka swilawuri, na swona.

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>

Hi swifaniso leswi nga ni swifaniso

Engetelani switlhokovetselo eka swilayidi swa wena hi ku olova hi .carousel-captionelemente leyi nga endzeni ka .carousel-item. Ti nga tumbetiwa hi ku olova eka swivono leswitsongo, hilaha swi kombisiweke hakona laha hansi, hi switirhisiwa swo kombisa leswi nga hlawuriwa . Hi ti tumbeta eku sunguleni hi .d-noneivi hi ti vuyisa eka switirhisiwa swa le xikarhi hi .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>

Ku tsemakanya

Engetela .carousel-fadeeka carousel ya wena ku endla leswaku swilayidi swi hanya hi ku cinca ka fade ematshan’weni ya swilayidi. Ku ya hi nhundzu ya wena ya carousel (xikombiso, swilayidi swa matsalwa ntsena), u nga ha lava ku engetela .bg-bodykumbe CSS yin’wana ya ntolovelo eka .carousel-items ku kuma crossfading leyi faneleke.

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>

Engetelani data-bs-interval=""eka a .carousel-itemku cinca nkarhi wo hlwela exikarhi ka ku khandziya xikanyakanya hi ku tisungulela eka nchumu lowu landzelaka.

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>

Tiyisisa ku swipa hi ku khumba

Ti- carousel ti seketela ku swipa eximatsini/xinene eka switirhisiwa swa touchscreen leswaku u famba-famba exikarhi ka swilayidi. Leswi swi nga tshikiwa hi ku tirhisa data-bs-touchxihlawulekisi. Xikombiso lexi nga laha hansi na xona a xi katsi data-bs-rideattribute leswaku xi nga autoplay.

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>

Xivumbeko xa munyama

Engetelani .carousel-darkeka .carouselya vulawuri bya munyama, swikombiso, na swifaniso swa le hansi. Swilawuri swi hundzuriwile ku suka eka ku tata ka swona ko basa ka ntolovelo hi filternhundzu ya CSS. Switlhokovetselo na vulawuri swi na swilo swo engetela swa Sass leswi cinca-cincaka leswi endlaka leswaku 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>

Ku cinca ka ntolovelo

Nkarhi wa ku cinca wa wu .carousel-itemnga cinciwa hi $carousel-transition-durationxihlawulekisi xa Sass ku nga si hlengeletiwa kumbe switayele swa ntolovelo loko u tirhisa CSS leyi hlengeletiweke. Loko ku tirhisiwa ku cinca ko tala, tiyisisa leswaku ku cinca ka ku hundzuka ku hlamuseriwa ku sungula (xikombiso transition: transform 2s ease, opacity .5s ease-out).

Sass

Swilo leswi cinca-cincaka

Swilo leswi cinca-cincaka swa ti-carousel hinkwato:

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

Swilo leswi cinca-cincaka swa carousel ya munyama : .

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

Matirhiselo

Hi ku tirhisa swihlawulekisi swa data

Tirhisa swihlawulekisi swa data ku lawula hi ku olova xiyimo xa carousel. data-bs-slideamukela marito ya nkoka prevkumbe next, leswi cincaka xiyimo xa xilayidi loko xi pimanisiwa ni xiyimo xa xona xa sweswi. Handle ka sweswo, tirhisa data-bs-slide-toku hundzisela xikombo xa swilayidi lexi nga si swekiwaka eka carousel data-bs-slide-to="2", lexi cincaka ndhawu ya xilayidi ku ya eka xikombo xo karhi lexi sungulaka hi 0.

Xihlawulekisi data-bs-ride="carousel"xi tirhisiwa ku fungha carousel tanihi animating ku sukela eka ku layicha pheji. Loko u nga tirhisi data-bs-ride="carousel"ku sungula carousel ya wena, u fanele u yi sungula hi wexe. A yi nge tirhisiwi yi hlanganisiwa na (ku nga laveki na loku nga lavekiki) ku sungula ka JavaScript loku nga erivaleni ka carousel yin’we.

Hi ku tirhisa JavaScript

Fonela carousel hi voko hi:

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

Swihlawulekisi

Tanihi leswi swihlawulekisi swi nga hundziseriwaka hi ku tirhisa swihlawulekisi swa data kumbe JavaScript, u ​​nga engetela vito ra xihlawulekisi eka data-bs-, tanihi le ka data-bs-animation="{value}". Tiyisisa leswaku u cinca muxaka wa xiyimo xa vito ra xihlawulekisi ku suka eka “ camelCase ” ku ya eka “ kebab-case ” loko u hundzisa swihlawulekisi hi ku tirhisa swihlawulekisi swa data. Hi xikombiso, tirhisa data-bs-custom-class="beautifier"ematshan’weni ya data-bs-customClass="beautifier".

Ku sukela eka Bootstrap 5.2.0, swiphemu hinkwaswo swi seketela xihlawulekisi xa datha leyi hlayisiweke ya xikambelodata-bs-config lexi nga vekaka vukorhokeri byo olova bya xiphemu tanihi ntambhu ya JSON. Loko elemente yi ri data-bs-config='{"delay":0, "title":123}'na na data-bs-title="456"swihlawulekisi, titlentikelo wo hetelela wu ta va 456naswona swihlawulekisi swa datha leswi hambaneke swi ta tlula mimpimo leyi nyikiweke eka data-bs-config. Ku engetela kwalaho, swihlawulekisi swa datha leswi nga kona swi kota ku veka mimpimo ya JSON ku fana na data-bs-delay='{"show":0,"hide":150}'.

Vito Muxaka Ku tlula Nhlamuselo
interval nomboro 5000 Nkarhi wo hlwela exikarhi ka ku rhendzeleka ka nchumu wo karhi hi ku tisungulela.
keyboard xitsonga xitsonga true Loko carousel yi fanele yi angula eka swiendlakalo swa khibhodi.
pause ntambhu, boolean "hover" Loko yi vekiwile eka "hover", yi yimisa ku rhendzeleka ka carousel eka mouseenterivi yi tlhela yi sungula ku rhendzeleka ka carousel eka mouseleave. Loko u vekiwile eka false, ku rhendzeleka ehenhla ka carousel a swi nge yi yimisi. Eka switirhisiwa leswi pfuniwaka hi ku khumba, loko swi vekiwile eka "hover", ku famba hi xikanyakanya ku ta yimanyana ku pfula touchend(loko mutirhisi a hetile ku tirhisana na carousel) ku ringana minkarhi yimbirhi, ku nga si sungula nakambe hi ku tisungulela. Leswi swi engetela eka mahanyelo ya mbeva.
ride ntambhu, boolean false Loko yi vekiwile eka true, yi tlanga carousel hi yoxe endzhaku ka loko mutirhisi a rhendzelekile hi voko nchumu wo sungula. Loko yi vekiwile eka "carousel", yi tlanga hi yoxe carousel loko yi ri eku layicha.
touch xitsonga xitsonga true Loko carousel yi fanele ku seketela ku tirhisana ka swipa swa ximatsi/xinene eka switirhisiwa swa touchscreen.
wrap xitsonga xitsonga true Loko carousel yi fanele yi famba hi xikanyakanya yi ya emahlweni kumbe yi va ni swimakiwa swo tika.

Maendlelo

Maendlelo ya asynchronous na ku cinca

Maendlelo hinkwawo ya API i ya asynchronous naswona ya sungula ku cinca . Va tlhelela eka mufoyini hi ku hatlisa loko ku cinca ku sungurile kambe ku nga si hela . Ku engetela kwalaho, ku vitaniwa ka ndlela eka xiphemu lexi cincaka ku ta honisiwa .

Vona matsalwa ya hina ya JavaScript ku kuma vuxokoxoko byo tala .

U nga endla xikombiso xa carousel hi muaki wa carousel, xikombiso, ku sungula hi swihlawulekisi swo engetela na ku sungula ku rhendzeleka hi swilo:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})
Ndlela Nhlamuselo
cycle Ku rhendzeleka hi swilo swa carousel ku suka eximatsini ku ya exineneni.
dispose Ku herisa carousel ya elemente. (Ku susa data leyi hlayisiweke eka elemente ya DOM)
getInstance Ndlela ya static leyi ku pfumelelaka ku kuma xikombiso xa carousel lexi fambelanaka na elemente ya DOM, u nga xi tirhisa hi ndlela leyi: bootstrap.Carousel.getInstance(element).
getOrCreateInstance Ndlela ya static leyi vuyisaka xikombiso xa carousel lexi fambelanaka na elemente ya DOM kutani yi tumbuluxa leyintshwa loko ko tshuka ku nga sunguriwanga. U nga yi tirhisa hi ndlela leyi: bootstrap.Carousel.getOrCreateInstance(element).
next Swirhendzevutana ku ya eka nchumu lowu landzelaka. Ku tlhelela eka mufoyini nchumu lowu landzelaka wu nga si kombisiwa (xikombiso, slid.bs.carouselxiendlakalo xi nga si humelela).
nextWhenVisible U nga cycle carousel kuya eka next loko page yinga vonaki kumbe carousel kumbe mutswari wa yona anga vonaki. Ku tlhelela eka mufoyini nchumu lowu kongomisiweke wu nga si kombisiwa .
pause Swi yimisa carousel ku famba hi xikanyakanya hi swilo.
prev Swirhendzevutana ku ya eka nchumu lowu hundzeke. Ku tlhelela eka mufoyini nchumu lowu hundzeke wu nga si kombisiwa (xikombiso, slid.bs.carouselxiendlakalo xi nga si humelela).
to Ku rhendzeleka ka carousel ku ya eka furemu yo karhi (0 leyi sekeriweke, ku fana na array). Ku tlhelela eka mufoyini nchumu lowu kongomisiweke wu nga si kombisiwa (xikombiso, slid.bs.carouselxiendlakalo xi nga si humelela).

Swiendlakalo

Tlilasi ya carousel ya Bootstrap yi paluxa swiendlakalo swimbirhi swo khoma eka ntirho wa carousel. Swiendlakalo leswi haswimbirhi swi na swihlawulekisi leswi landzelaka leswi engetelekeke:

  • direction: Ndlela leyi carousel yi rhetaka ha yona (kumbe "left"kumbe "right").
  • relatedTarget: Xiphemu xa DOM lexi nga eku rheleriweni endhawini ya xona tanihi nchumu lowu tirhaka.
  • from: Xikombo xa nchumu wa sweswi
  • to: Xikombo xa nchumu lowu landzelaka

Swiendlakalo hinkwaswo swa carousel swi duvuriwa eka carousel hi yoxe (i.e. eka <div class="carousel">).

Muxaka wa xiendlakalo Nhlamuselo
slid.bs.carousel Ku pfuriwa loko carousel yi hetile ku cinca ka yona ka swilayidi.
slide.bs.carousel Yi pfurha hi ku hatlisa loko ku slidevitaniwa ndlela ya xikombiso. 
const myCarousel = document.getElementById('myCarousel')

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