in English

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

Umthelela wokugqwayiza wale ngxenye uncike prefers-reduced-motionembuzweni wemidiya. Bona ingxenye yokunyakaza encishisiwe yemibhalo yethu yokufinyeleleka .

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 id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>

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. Uma ungasebenzisi data-ride="carousel"ukuqalisa i-carousel yakho, kufanele uyiqalise ngokwakho. 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="".

Igama Uhlobo Okuzenzakalelayo Incazelo
isikhawu inombolo 5000 Inani lesikhathi sokubambezeleka phakathi kokuhamba ngebhayisikili ngokuzenzakalela into. Uma kungamanga, i-carousel ngeke ijikeleze ngokuzenzakalelayo.
ikhibhodi boolean iqiniso Ukuthi i-carousel kufanele sisabele emicimbini yekhibhodi.
ima kancane umucu | boolean "hambahamba"

Uma kusethelwe ku- "hover", imisa isikhashana ukuhamba ngebhayisikili kwe-carousel mouseenterbese iqalisa kabusha ukugijima kwe-carousel kuvuliwe mouseleave. Uma kusethelwe ku- false, ukuhambisa phezulu kwe-carousel ngeke kuyimise isikhashana.

Kumadivayisi anikwe amandla ukuthinta, uma kusethelwe ku- "hover", ukuhamba ngebhayisikili kuzoma touchend(uma umsebenzisi eseqedile ukusebenzisana ne-carousel) izikhawu ezimbili, ngaphambi kokuthi kuqalise kabusha ngokuzenzakalelayo. Qaphela ukuthi lokhu kungaphezu kokuziphatha kwegundane okungenhla.
gibela umucu amanga Idlala ngokuzenzakalela i-carousel ngemuva kokuthi umsebenzisi ajikelezise mathupha into yokuqala. Uma "i-carousel", idlala ngokuzenzakalelayo i-carousel elayishiwe.
ukugoqa boolean iqiniso Ukuthi i-carousel kufanele ijikeleze ngokuqhubekayo noma ibe nokuma kanzima.
ukuthinta boolean iqiniso Ukuthi i-carousel kufanele isekele ukusebenzisana kokuswayipha kwesokunxele/kwesokudla kumadivayisi wesikrini esithintwayo.

Izindlela

Izindlela ze-Asynchronous kanye noshintsho

Zonke izindlela ze-API azivumelanisi futhi ziqala inguquko . Babuyele kofonayo uma sekuqalwa uguquko kodwa lungakapheli . Ngokungeziwe, ikholi yendlela engxenyeni yoshintsho izozitshwa .

Bheka imibhalo yethu ye-JavaScript ukuze uthole ulwazi olwengeziwe .

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

.carousel('nextWhenVisible')

Ungajikelezi i-carousel uye kwelinye lapho ikhasi lingabonakali noma i-carousel noma umzali wayo engabonakali. Ibuyela kofonayo ngaphambi kokuba kuboniswe into elandelayo (okungukuthi ngaphambi kokuba slid.bs.carouselkwenzeke umcimbi).

.carousel('to')

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

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

Uhlobo Lomcimbi Incazelo
slide.bs.carousel Lo mcimbi uvutha ngokushesha lapho slideindlela yesibonelo isetshenziswa.
slid.bs.carousel Lo mcimbi uxoshwa lapho i-carousel isiqedile ukuguqulwa kwama-slide. 
$('#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).