I-Carousel

Ingxenye yombukiso wesilayidi yokuhamba ngebhayisikili ezintweni—izithombe noma amaslayidi ombhalo—njenge-carousel.

Isebenza kanjani

I-carousel iwumbukiso wesilayidi sokuhamba ngebhayisikili ngochungechunge lokuqukethwe, olwakhiwe ngezinguquko ze-CSS 3D kanye ne-JavaScript encane. Isebenza ngochungechunge lwezithombe, umbhalo, noma imakhaphu yangokwezifiso. Kuhlanganisa futhi nokusekelwa kwezilawuli zangaphambilini/ezilandelayo nezinkomba.

Ezipheqululini lapho i- Page Visibility API isekelwa khona, i-carousel izogwema ukuslayida lapho ikhasi lewebhu lingabonakali kumsebenzisi (njengalapho ithebhu yesiphequluli ingasebenzi, iwindi lesiphequluli lincishiswa, njll.).

Sicela uqaphele ukuthi ama-carousel afakwe esidlekeni awasekelwe, futhi ama-carousels ngokuvamile awahambisani nezindinganiso zokufinyeleleka.

Okokugcina, uma wakha i-JavaScript yethu ngomthombo, kudingautil.js .

Isibonelo

Ama-carousels awazimisi ngokuzenzakalelayo ubukhulu besilayidi. Kanjalo, ungase udinge ukusebenzisa izinsiza ezengeziwe noma izitayela zangokwezifiso ukuze usayizi ofanele wokuqukethwe. Nakuba ama-carousels esekela izilawuli zangaphambilini/ezilandelayo nezinkomba, azidingeki ngokusobala. Engeza futhi wenze ngokwezifiso njengoba ubona kufanelekile.

Ikilasi .activelidinga ukwengezwa kwesinye sezilayidi ngaphandle kwalokho i-carousel ngeke ibonakale. Futhi qiniseka ukuthi usetha i-id eyingqayizivele .carouselkuzilawuli ozikhethela, ikakhulukazi uma usebenzisa ama-carousel amaningi ekhasini elilodwa. Izinto zokulawula nezinkomba kufanele zibe data-targetnesibaluli (noma hrefsezixhumanisi) esifana ne-id .carouselyento.

Amaslayidi kuphela

Nali i-carousel enamaslayidi kuphela. Qaphela ukuba khona kwezithombe .d-blockkanye .w-100naku-carousel ukuze uvimbele ukuqondanisa okuzenzakalelayo kwesiphequluli.

<div id="carouselExampleSlidesOnly" class="carousel slide" data-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>

Ngezilawuli

Ukwengeza kuzilawuli zangaphambilini nezilandelayo:

<div id="carouselExampleControls" class="carousel slide" data-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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Ngezinkomba

Ungakwazi futhi ukwengeza izinkomba ku-carousel, eduze nezilawuli, futhi.

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Ngamagama-ncazo

Engeza amagama-ncazo kumaslayidi akho kalula nge- .carousel-captionelementi ngaphakathi kwanoma iyiphi .carousel-item. Angafihlwa kalula ezindaweni zokubuka ezincane, njengoba kuboniswe ngezansi, ngezinsiza zokubonisa ozikhethela . Sizifihla ekuqaleni .d-nonefuthi sizibuyisele kumadivayisi anosayizi omaphakathi ane- .d-md-block.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

I-Crossfade

Engeza .carousel-fadeku-carousel yakho ukuze uphilise amaslayidi ngoshintsho olufiphele esikhundleni sesilayidi.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

.carousel-itemIsikhawu somuntu ngamunye

Engeza data-interval=""ku-a .carousel-itemukuze ushintshe inani lesikhathi sokulibaziseka phakathi kokuhamba ngebhayisikili ngokuzenzakalelayo ukuya entweni elandelayo.

<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Ukusetshenziswa

Ngezibaluli zedatha

Sebenzisa izibaluli zedatha ukuze ulawule kalula ukuma kwe-carousel. data-slideyamukela amagama angukhiye prevnoma next, eshintsha indawo yesilayidi ngokuhlobene nendawo yaso yamanje. Kungenjalo, sebenzisa data-slide-toukudlulisa inkomba yesilayidi eluhlaza ku-carousel data-slide-to="2", eshintsha indawo yesilayidi ibe inkomba ethile eqala ngo- 0.

Isibaluli data-ride="carousel"sisetshenziselwa ukumaka i-carousel njengokugqwayiza kusukela ekulayishweni kwekhasi. Ngeke isetshenziswe kuhlanganiswe (nokungadingeki nokungadingeki) ukuqaliswa okucacile kwe-JavaScript kwe-carousel efanayo.

Nge-JavaScript

Shayela i-carousel ngokwenza:

$('.carousel').carousel()

Izinketho

Izinketho zingadluliswa ngezibaluli zedatha noma i-JavaScript. Ukuze uthole izibaluli zedatha, faka igama lenketho kokuthi data-, njengaku data-interval="".

Izindlela

.carousel(options)

Iqalisa i-carousel ngezinketho zokuzithandela objectfuthi iqala ukuhamba ngebhayisikili ezintweni.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Izungeza izinto ze-carousel ukusuka kwesokunxele kuye kwesokudla.

.carousel('pause')

Imisa i-carousel ekuhambeni ngebhayisikili ezintweni.

.carousel(number)

Ibiyela i-carousel kuhlaka oluthile (okusekelwe ngo-0, okufana namalungu afanayo). Ibuyela kofonayo ngaphambi kokuba kuboniswe into eqondiwe (okungukuthi ngaphambi kokuba slid.bs.carouselumcimbi wenzeke).

.carousel('prev')

Imijikelezo eya entweni edlule. Ibuyela kofonayo ngaphambi kokuba kuboniswe into yangaphambilini (okungukuthi ngaphambi kokuba slid.bs.carouselkwenzeke umcimbi).

.carousel('next')

Imijikelezo eya entweni elandelayo. Ibuyela kofonayo ngaphambi kokuba kuboniswe into elandelayo (okungukuthi ngaphambi kokuba slid.bs.carouselkwenzeke umcimbi).

.carousel('dispose')

Icekela phansi i-carousel yento.

Imicimbi

Ikilasi le-carousel le-Bootstrap lidalula imicimbi emibili yokuxhunywa ekusebenzeni kwe-carousel. Yomibili imicimbi inezimpawu ezengeziwe ezilandelayo:

• direction: Isiqondiso lapho i-carousel ishelela khona ( "left"noma "right").
• relatedTarget: I-elementi ye-DOM eslayishwa endaweni njengento esebenzayo.
• from: Inkomba yento yamanje
• to: Inkomba yento elandelayo

Yonke imicimbi ye-carousel idutshulwa ku-carousel ngokwayo (okungukuthi ku- <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Shintsha ubude besikhathi soshintsho

Ubude besikhathi soshintsho .carousel-itemlungashintshwa ngokuhluka kwe- $carousel-transitionSass ngaphambi kokuhlanganiswa noma izitayela zangokwezifiso uma usebenzisa i-CSS ehlanganisiwe. Uma izinguquko eziningi zisetshenziswa, qiniseka ukuthi uguquko luchazwa kuqala (isb. transition: transform 2s ease, opacity .5s ease-out).