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.).
prefers-reduced-motion
embuzweni 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 .active
lidinga ukwengezwa kwesinye sezilayidi ngaphandle kwalokho i-carousel ngeke ibonakale. Futhi qiniseka ukuthi usetha okuhlukile id
kuzilawuli .carousel
ozikhethela, ikakhulukazi uma usebenzisa ama-carousel amaningi ekhasini elilodwa. Izinto zokulawula nezinkomba kufanele zibe data-target
nesibaluli (noma sezixhumanisi href
) esifana nesici.id
.carousel
Amaslayidi kuphela
Nali i-carousel enamaslayidi kuphela. Qaphela ukuba khona kwezithombe .d-block
kanye .w-100
naku-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
Yengeza kuzilawuli zangaphambilini nezilandelayo. Sincoma ukusebenzisa ama <button>
-elementi, kodwa ungasebenzisa ama- <a>
elementi ane- role="button"
.
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Ngamagama-ncazo
Engeza amagama-ncazo kumaslayidi akho kalula nge- .carousel-caption
elementi ngaphakathi kwanoma iyiphi .carousel-item
. Angafihlwa kalula ezindaweni zokubuka ezincane, njengoba kuboniswe ngezansi, ngezinsiza zokubonisa ozikhethela . Sizifihla ekuqaleni .d-none
futhi 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>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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
I-Crossfade
Engeza .carousel-fade
ku-carousel yakho ukuze uphilise amaslayidi ngoshintsho olufiphele esikhundleni sesilayidi. Ngokuya ngokuqukethwe kwe-carousel yakho (isb, umbhalo wamaslayidi kuphela), ungase ufune ukwengeza .bg-body
noma i-CSS yangokwezifiso ku- .carousel-item
s ukuze unqamule kahle.
<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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
.carousel-item
Isikhawu somuntu ngamunye
Engeza data-interval=""
ku-a .carousel-item
ukuze 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>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Khubaza ukuswayipha kokuthinta
Ama-carousels asekela ukuswayiphela kwesokunxele/kwesokudla kumadivayisi esikrini esithintwayo ukuze ahambe phakathi kwamaslayidi. Lokhu kungakhutshazwa kusetshenziswa data-touch
isibaluli. Isibonelo esingezansi naso asibandakanyi data-ride
isibaluli futhi data-interval="false"
sinaso asidlali ngokuzenzakalela.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Ukusetshenziswa
Ngezibaluli zedatha
Sebenzisa izibaluli zedatha ukuze ulawule kalula ukuma kwe-carousel. data-slide
yamukela amagama angukhiye prev
noma next
, eshintsha indawo yesilayidi ngokuhlobene nendawo yaso yamanje. Kungenjalo, sebenzisa data-slide-to
ukudlulisa 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 ngokuzenzakalelayo into. Uma false , i-carousel ngeke ijikeleze ngokuzenzakalelayo. |
ikhibhodi | boolean | iqiniso | Ukuthi i-carousel kufanele sisabele emicimbini yekhibhodi. |
ima kancane | umucu | boolean | 'hambahamba' | Uma kusethelwe ku- Kumadivayisi anikwe amandla ukuthinta, uma kusethelwe ku- |
gibela | umucu | amanga | Idlala ngokuzenzakalela i-carousel ngemuva kokuthi umsebenzisi ajikelezise mathupha into yokuqala. Uma kusethelwe ku- 'carousel' , idlala ngokuzenzakalela 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 object
futhi 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.carousel
umcimbi wenzeke).
.carousel('prev')
Imijikelezo eya entweni edlule. Ibuyela kofonayo ngaphambi kokuba kuboniswe into yangaphambilini (okungukuthi ngaphambi kokuba slid.bs.carousel
kwenzeke umcimbi).
.carousel('next')
Imijikelezo eya entweni elandelayo. Ibuyela kofonayo ngaphambi kokuba kuboniswe into elandelayo (okungukuthi ngaphambi kokuba slid.bs.carousel
kwenzeke 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.carousel
kwenzeke 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.carousel
kwenzeke 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 yamanjeto
: 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 slide indlela 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-item
lungashintshwa ngokuhluka kwe- $carousel-transition
Sass 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
).