Karusel we dɛn kin yuz fɔ mek
Wan slayd sho kɔmpɔnɛnt fɔ sayklɔs tru ɛlimɛnt dɛn—imej ɔ slayd dɛn we gɛt tɛks—lɛk karusel.
Aw i de wok
Di karusel na wan slayd sho fɔ sayklis tru wan siriɔs kɔntinyu, we dɛn bil wit CSS 3D transfɔm ɛn smɔl JavaSkript. I de wok wit wan siriɔs pikchɔ, tɛks, ɔ kɔstɔm mak. I inklud bak sɔpɔt fɔ di fɔs/nɛks kɔntrol ɛn indikɛtɔ dɛn.
Insay di brawza dɛn usay dɛn sɔpɔt di Pej Visibiliti API , di karusel go avɔyd fɔ slayv we di wɛb pej nɔ de si di pɔsin we de yuz am (lɛk we di brɔwza tab nɔ de wok, di brawza winda nɔ bɔku, ɛn ɔda tin dɛn).
prefers-reduced-motion
midia kwɛstyɔn. Si di
ridyus muvmɛnt sɛkshɔn na wi aksesibiliti dɔkyumentri .
Duya mɛmba se dɛn nɔ de sɔpɔt nest karusel dɛn, ɛn karusel dɛn jɔs nɔ de fala di standad dɛn fɔ akses.
Las wan, if yu de bil wi JavaSkript frɔm sɔs, i nid fɔutil.js
.
Ɛgzampul
Karusel nɔ de ɔtomɛtik nɔmal di dimɛnshɔn dɛn fɔ di slayd dɛn. As a so, yu kin nid fɔ yuz ɔda yutiliti ɔ kɔstɔm stayl dɛn fɔ mek yu gɛt di rayt sayz fɔ di tin dɛn we de insay. Wail karusel dεm de sכpכt di fכs/nεks kכntrכl dεm εn indikεtכ dεm, dεn nכ de kכl dεm klia wan. Ad ɛn kɔstɔmayz am as yu si se i fayn.
Di .active
klas nid fɔ ad to wan pan di slayd dɛn ɔdasay di karusel nɔ go de fɔ si. Dɔn bak mek shɔ se yu sɛt wan yunik id
pan di .carousel
fɔ opshɔnal kɔntrol dɛn, mɔ if yu de yuz bɔku karusel dɛn na wan pej. Kɔntrol ɛn indikɛtɔ ɛlimɛnt dɛn fɔ gɛt data-target
atribyut (ɔ href
fɔ link dɛn) we de mach di id
ɔf di .carousel
ɛlimɛnt.
Slayd dɛn nɔmɔ
Na wan karusel wit slayd nɔmɔ. Notis di prɛzɛns fɔ di .d-block
ɛn .w-100
pan karusel pikchɔ dɛn fɔ mek di brɔwza nɔ alaynɛt difɔlt imej dɛn.
<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>
Wit kɔntrol dɛn
Ad in di fɔs ɛn di nɛks kɔntrol dɛn. Wi kin advays yu fɔ yuz <button>
ɛlimɛnt dɛn, bɔt yu kin yuz <a>
ɛlimɛnt dɛn bak wit 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>
Wit indikɛtɔ dɛn
Yu kin ad di indikɛtɔ dɛn bak to di karusel, nia di kɔntrol dɛn, bak.
<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>
Wit di kapshɔn dɛn
Ad kapshɔn dɛn to yu slayd dɛn izi wan wit di .carousel-caption
ɛlimɛnt insay ɛni .carousel-item
. Dɛn kin ayd dɛn izi wan na smɔl smɔl say dɛn fɔ si, lɛk aw dɛn sho dɔŋ ya, wit opshɔnal displei yutiliti dɛn . Wi kin ayd dɛn fɔs wit .d-none
ɛn briŋ dɛn bak pan midul-sayz divays dɛn wit .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>
Krɔs-fayd
Ad .carousel-fade
to yu karusel fɔ animate slayd dɛn wit wan fade transishɔn instead ɔf wan slayd. Dipen pan yu karusel kɔntinyu (ɛgz., tɛks nɔmɔ slayd dɛn), yu kin want fɔ ad .bg-body
ɔ sɔm kɔstɔm CSS to di .carousel-item
s fɔ mek dɛn krɔs fayn fayn wan.
<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>
Wan wan .carousel-item
intaval
Ad data-interval=""
to a .carousel-item
fɔ chenj di tɛm we yu fɔ delay bitwin ɔtomɛtik sayklis to di nɛks tin.
<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>
Disable fɔ tɔch swip
Karusel dɛn kin sɔpɔt fɔ swip lɛft/rayt na tɔchskrin divays dɛn fɔ muv bitwin di slayd dɛn. Dis kin disable yuz di data-touch
atribyut. Di ɛgzampul we de dɔŋ bak nɔ inklud di data-ride
atribyut ɛn gɛt data-interval="false"
so i nɔ de ɔtoplay.
<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>
Aw fɔ yuz am
Via data atribyut dɛn
Yuz data atribyut fɔ izi fɔ kɔntrol di pozishɔn fɔ di karusel. data-slide
aksept di ki wɔd dɛn prev
ɔ next
, we de chenj di say we di slayd de we yu kɔmpia am to di say we i de naw. Ɔda we de fɔ yuz data-slide-to
fɔ pas wan raw slayd indeks to di karusel data-slide-to="2"
, we de chenj di say we di slayd de go to wan patikyula indeks we bigin wit 0
.
Di data-ride="carousel"
atribyut de yuz fɔ mak wan karusel as animat stat we pej lod. If yu nɔ yuz data-ride="carousel"
fɔ initialize yu carousel, yu fɔ initialize am yusɛf. I nɔ go ebul fɔ yuz am togɛda wit (ridandant ɛn nɔ nid) ɛksplisit JavaSkript initializeshɔn fɔ di sem karusel.
Yu kin yuz JavaSkript fɔ yuz am
Kɔl karusel wit yu an wit:
$('.carousel').carousel()
Di tin dɛn we yu kin pik fɔ du
Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-
, lɛk insay data-interval=""
.
Nem | Kayn | Balans | Tɔk bɔt |
---|---|---|---|
intaval | nɔmba | 5000 pipul dɛn | Di amount of taim fɔ delay bitwin ɔtomɛtik sayklis wan tin. If false , karusel nɔ go ɔtomɛtik saykl. |
kibɔd fɔ di kibɔd | boolean we dɛn kɔl | tru | If di karusel fɔ riak to di tin dɛn we de apin na di kibɔd. |
wet smɔl | string fɔ di wan dɛn we de | boolean we dɛn kɔl | 'hova' we yu de du. | If dɛn sɛt am to Na divays dɛn we gɛt tɔch-ɛnibɛl, we dɛn sɛt am to |
rayd | rop | lay | Awtoplay di karusel afta di pɔsin we de yuz am dɔn saykl di fɔs tin wit in an. If dɛn sɛt am to 'carousel' , i de ɔtoplay di karusel we i de lod. |
rap | boolean we dɛn kɔl | tru | If di karusel fɔ de saykl kɔntinyu ɔ i fɔ gɛt had stɔp dɛn. |
tɔch | boolean we dɛn kɔl | tru | If di karusel fɔ sɔpɔt lɛft/rayt swip intarakshɔn dɛn na tɔchskrin divays dɛn. |
Di we aw dɛn de du am
Asynchronous mεtכd dεm εn transishכn dεm
Ɔl di API mɛtɔd dɛn na asynchronous ɛn dɛn kin stat wan transishɔn . Dɛn kin go bak to di pɔsin we kɔl am jɔs lɛk aw dɛn bigin fɔ chenj bɔt bifo i dɔn . Apat frɔm dat, dɛn go ignore wan mɛtɔd kɔl pan wan transishɔn kɔmpɔnɛnt .
.carousel(options)
Initializes di carousel wit wan opshonal opshon object
en stat saikl tru tin dem.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Saykl dɛn tru di karusel tin dɛn frɔm lɛft to rayt.
.carousel('pause')
Stɔp di karusel fɔ sayklɔs tru tin dɛn.
.carousel(number)
Saykl di karusel to wan patikyula freym (0 bays, we fiba wan arenjmɛnt). Ritɔn to di pɔsin we kɔl bifo dɛn sho di tin we dɛn want fɔ du (dat na bifo di slid.bs.carousel
tin apin).
.carousel('prev')
Saykl dɛn to di tin we bin dɔn de bifo. Ritɔn to di pɔsin we kɔl bifo dɛn sho di tin we bin de bifo (dat na bifo di slid.bs.carousel
tin apin).
.carousel('next')
Saykl dɛn to di nɛks tin. Ritɔn to di pɔsin we kɔl bifo dɛn sho di nɛks tin (dat na bifo di slid.bs.carousel
tin apin).
.carousel('dispose')
I de pwɛl wan ɛlimɛnt in karusel.
.carousel('nextWhenVisible')
Nɔ saykl di karusel to nɛks we di pej nɔ de si ɔ di karusel ɔ in mama ɔ papa nɔ de si. Ritɔn to di pɔsin we kɔl bifo dɛn sho di nɛks tin (dat na bifo di slid.bs.carousel
tin apin).
.carousel('to')
Saykl di karusel to wan patikyula freym (0 bays, we fiba wan arenjmɛnt). Ritɔn to di pɔsin we kɔl bifo dɛn sho di nɛks tin (dat na bifo di slid.bs.carousel
tin apin).
Di tin dɛn we kin apin
Bootstrap in karusel klas de ɛksplɔz tu ivintɛns fɔ huk insay karusel funkshɔnaliti. Dɛn tu ivin dɛn ya gɛt dɛn ɔda prɔpati dɛn ya:
direction
: Di dairekshɔn we di karusel de slayv (ɛither"left"
ɔ"right"
).relatedTarget
: Di DOM elemɛnt we dɛn de slid insay ples as di aktiv aytem.from
: Di indeks fɔ di tin we de nawto
: Di indeks fɔ di nɛks tin
Ɔl di karusel ivin dɛn de faya na di karusel sɛf (dat na na di <div class="carousel">
).
Di kayn tin we apin | Tɔk bɔt |
---|---|
slayd.bs.karosel | Dis ivent de faya wantɛm wantɛm we dɛn kɔl di slide instans mɛtɔd. |
slid.bs.karosel we de na di slid | Dis ivent de faya we di karusel dɔn dɔn in slayd transishɔn. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Chenj di tɛm we di chenj de tek
Di transishɔn durayshɔn fɔ .carousel-item
kin chenj wit di $carousel-transition
Sass vɛriɔbul bifo yu kɔmpilayt ɔ kɔstɔm stayl dɛn if yu de yuz di kɔmpilayt CSS. If dɛn yuz bɔku transishɔn dɛn, mek shɔ se dɛn difayn di transfɔm transishɔn fɔs (ɛgz. transition: transform 2s ease, opacity .5s ease-out
).