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.
Ɛ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-bs-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-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>
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-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>
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-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>
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-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>
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-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>
Wan wan .carousel-item
intaval
Ad data-bs-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-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>
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-bs-touch
atribyut. Di ɛgzampul we de dɔŋ bak nɔ gɛt di data-bs-ride
atribyut so i nɔ de ɔtoplay.
<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>
Dak vayriɔnt
Ad .carousel-dark
to di .carousel
fɔ kɔntrol dɛn we dak, indikɛtɔ dɛn, ɛn kapshɔn dɛn. Kɔntrol dɛn dɔn invayt frɔm dɛn difɔlt wayt fil wit di filter
CSS prɔpati. Kapshɔn ɛn kɔntrol dɛn gɛt ɔda Sass vɛriɔbul dɛn we de kɔstɔmayz di color
ɛn background-color
.
<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>
Kastom transishɔn
Di transishɔn durayshɔn fɔ .carousel-item
kin chenj wit di $carousel-transition-duration
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 aplay 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
).
Sass bin de
Di tin dɛn we kin chenj
Variables fɔ ɔl di karusel dɛn:
$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`)
Variables fɔ di dak karusel : .
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Aw fɔ yuz am
Via data atribyut dɛn
Yuz data atribyut fɔ izi fɔ kɔntrol di pozishɔn fɔ di karusel. data-bs-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-bs-slide-to
fɔ pas wan raw slayd indeks to di karusel data-bs-slide-to="2"
, we de chenj di say we di slayd de go to wan patikyula indeks we bigin wit 0
.
Di data-bs-ride="carousel"
atribyut de yuz fɔ mak wan karusel as animat stat we pej lod. If yu nɔ yuz data-bs-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:
const carousel = new bootstrap.Carousel('#myCarousel')
Di tin dɛn we yu kin pik fɔ du
As opshɔn dɛn kin pas bay data atribyut ɔ JavaSkript, yu kin ad opshɔn nem to data-bs-
, lɛk insay data-bs-animation="{value}"
. Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm “ camelCase ” to “ kebab-case ” we yu de pas di opshɔn dɛn tru data atribyut dɛn. Fɔ ɛgzampul, yuz data-bs-custom-class="beautifier"
insted fɔ data-bs-customClass="beautifier"
.
As fɔ Bootstrap 5.2.0, ɔl di kɔmpɔnɛnt dɛn de sɔpɔt wan ɛkspirimɛnt rizɔv data atribyut data-bs-config
we kin os simpul kɔmpɔnɛnt kɔnfigyushɔn as JSON string. We wan ɛlimɛnt gɛt data-bs-config='{"delay":0, "title":123}'
ɛn data-bs-title="456"
atribyut, di fayn title
valyu go bi 456
ɛn di sɛpret data atribyut dɛn go ɔvalayz valyu dɛn we dɛn gi pan data-bs-config
. Apat frɔm dat, di data atribyut dɛn we de naw ebul fɔ gɛt JSON valyu dɛn lɛk data-bs-delay='{"show":0,"hide":150}'
.
Nem | Kayn | Balans | Tɔk bɔt |
---|---|---|---|
interval |
nɔmba | 5000 |
Di amount of taim fɔ delay bitwin ɔtomɛtik sayklis wan tin. |
keyboard |
boolean we dɛn kɔl | true |
If di karusel fɔ riak to di tin dɛn we de apin na di kibɔd. |
pause |
string, we dɛn kɔl buli | "hover" |
If dɛn sɛt am to "hover" , i de stɔp di sayklis fɔ di karusel mouseenter ɛn bigin bak di sayklis fɔ di karusel pan mouseleave . If yu sɛt am to false , fɔ hov oba di karusel nɔ go stɔp am. Na divays dɛn we gɛt tɔch-ɛnibɛl, we dɛn sɛt am to "hover" , sayklis go stɔp pan touchend (wans di pɔsin we de yuz am dɔn fɔ intarakt wit di karusel) fɔ tu intaval dɛn, bifo i bigin bak ɔtomɛtik wan. Dis na in ad pan di we aw di maws de biev. |
ride |
string, we dɛn kɔl buli | false |
If dɛn sɛt am to true , i go ɔtoplay 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. |
touch |
boolean we dɛn kɔl | true |
If di karusel fɔ sɔpɔt lɛft/rayt swip intarakshɔn dɛn na tɔchskrin divays dɛn. |
wrap |
boolean we dɛn kɔl | true |
If di karusel fɔ de saykl kɔntinyu ɔ i fɔ gɛt had stɔp 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 .
Yu kin mek wan karusel instans wit di karusel kɔnstrɔkta, fɔ ɛgzampul, fɔ initialize wit ɔda opshɔn dɛn ɛn bigin fɔ sayklis tru tin dɛn:
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
wrap: false
})
We | Tɔk bɔt |
---|---|
cycle |
Saykl dɛn tru di karusel tin dɛn frɔm lɛft to rayt. |
dispose |
I de pwɛl wan ɛlimɛnt in karusel. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt) |
getInstance |
Statik we de alaw yu fɔ gɛt di karusel instans we gɛt fɔ du wit wan DOM ɛlimɛnt, yu kin yuz am lɛk dis: bootstrap.Carousel.getInstance(element) . |
getOrCreateInstance |
Statik mɛtɔd we de ritɔn wan karusel instans we gɛt fɔ du wit wan DOM ɛlimɛnt ɔ mek wan nyu wan insay kes we i nɔ bin initialize. Yu kin yuz am lɛk dis: bootstrap.Carousel.getOrCreateInstance(element) . |
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 (ɛgz., bifo di slid.bs.carousel tin apin). |
nextWhenVisible |
Nɔ saykl 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 tin we yu want fɔ du . |
pause |
Stɔp di karusel fɔ sayklɔs tru tin dɛn. |
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 (ɛgz., bifo di slid.bs.carousel tin apin). |
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 tin we dɛn want fɔ du (ɛgz., 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 |
---|---|
slid.bs.carousel |
Faya we di karusel dɔn dɔn in slayd chenj. |
slide.bs.carousel |
Faya wantɛm wantɛm we dɛn kɔl di slide instans mɛtɔd. |
const myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', event => {
// do something...
})