Carousel a wɔde yɛ nneɛma
Slideshow afã bi a wɔde sakre fa element ahorow mu—mfonini anaa nsɛm a wɔakyerɛw ho mfonini—te sɛ carousel.
Sɛnea ɛyɛ adwuma
Carousel no yɛ slideshow a wɔde sakre tu fa nsɛm a ɛtoatoa so mu, a wɔde CSS 3D nsakrae ne JavaScript kakra na esii. Ɛde mfonini ahorow, nsɛm, anaa agyiraehyɛde a wɔahyɛ da ayɛ na ɛyɛ adwuma. Ɛsan nso ka mmoa a wɔde ma wɔ kan/a edi hɔ a wɔde di dwuma ne nsɛnkyerɛnnede ahorow ho.
Wɔ browser ahorow a wɔboa Page Visibility API no mu no, carousel no bɛkwati sɛ ɛbɛtwetwe bere a wɛbsaet krataafa no ntumi nhu nea ɔde di dwuma no (te sɛ bere a browser tab no nyɛ adwuma, browser window no ayɛ ketewaa, ne nea ɛkeka ho).
prefers-reduced-motion
media asɛmmisa no so. Hwɛ
yɛn akwan a wɔfa so nya nneɛma ho nkrataa no fã a wɔatew so no .
Yɛsrɛ wo hu sɛ wɔmfa nested carousels mmoa, na mpɛn pii no carousels nhyia gyinapɛn ahorow a ɛfa akwan a wɔfa so nya nneɛma ho.
Nhwɛsoɔ
Carousels ntumi nyɛ slide nsusuwii ahorow no sɛnea ɛte ankasa. Sɛnea ɛte no, ebia ɛho behia sɛ wode nneɛma foforo a wɔde di dwuma anaa akwan horow a wɔahyɛ da ayɛ di dwuma na ama woatumi ayɛ nneɛma no kɛse sɛnea ɛfata. Bere a carousels boa controls ne indicators a atwam/a edi hɔ no, ɛnyɛ nea wɔhwehwɛ pefee. Fa ka ho na yɛ nea wopɛ sɛnea wuhu sɛ ɛfata.
Ɛsɛ .active
sɛ wɔde adesuakuw no ka slide ahorow no biako ho anyɛ saa a carousel no renhu. Afei nso hwɛ hu sɛ wode soronko bi id
besi hɔ .carousel
ama controls a wopɛ, titiriw sɛ wode carousels pii redi dwuma wɔ kratafa biako so a. Ɛsɛ sɛ control ne indicator elements no nya data-bs-target
attribute (anaasɛ href
ma links) a ɛne id
of the .carousel
element no hyia.
Slides nkutoo na ɛwɔ hɔ
Carousel a ɛwɔ slides nkutoo ni. Hyɛ .d-block
ne .w-100
wɔ carousel mfonini ahorow so no nsow na amma browser default mfonini ahorow no anhyehyɛ no.
<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>
Ne nneɛma a wɔde di dwuma
Fa ka ho wɔ controls a atwam ne nea edi hɔ no mu. Yɛhyɛ nyansa sɛ fa <button>
elements di dwuma, nanso wubetumi nso de <a>
elements a ɛwɔ 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>
Ne nsɛnkyerɛnnede ahorow
Wubetumi nso de nsɛnkyerɛnne no aka carousel no ho, aka controls no ho, nso.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<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>
Ne nsɛm a wɔakyerɛw wɔ so
Fa nsɛm a wɔakyerɛw no ka wo slide ahorow no ho mmerɛw denam .carousel-caption
element a ɛwɔ biara mu .carousel-item
no so . Wobetumi de asie ntɛm wɔ viewports nketewa so, sɛnea wɔakyerɛ wɔ ase ha no, a optional display utilities . Yɛde sie mfiase no .d-none
na yɛde san ba wɔ mfiri akɛse a ɛwɔ mfinimfini so de .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<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>
Crossfade a ɛyɛ fɛ
Fa ka .carousel-fade
wo carousel ho na ama slide ahorow no ayɛ anigye denam fade nsakrae so sen sɛ wode slide bedi dwuma.
<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>
Ankorankoro .carousel-item
ntamgyinafo
Fa ka data-bs-interval=""
a ho .carousel-item
na sesa bere dodow a wode bɛkyɛ wɔ sakre a wobɛfa so ara akɔ ade a edi hɔ no ntam.
<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>
Ma touch swiping no nyɛ adwuma
Carousels boa swiping benkum/nifa wɔ touchscreen mfiri ahorow so ma ɛkɔ slide ahorow ntam. Wobetumi de data-bs-touch
attribute no asiw eyi ano. Nhwɛsoɔ a ɛwɔ aseɛ ha no nso nka data-bs-ride
attribute no ho na ɛwɔ data-bs-interval="false"
enti ɛnyɛ autoplay.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-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>
Esum mu nsakrae
Fa ka .carousel-dark
ho .carousel
ma controls, indicators, ne captions a ɛyɛ sum. Wɔadan controls no afi wɔn default white fill a filter
CSS agyapade no wom no mu. Captions ne controls wɔ Sass variables foforo a ɛsesa color
ne 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>
Amanneɛ kwan so nsakrae
Nsakraeɛ bere tenten a .carousel-item
wobɛtumi asesa ne $carousel-transition-duration
Sass variable ansa na woaboaboa ano anaasɛ custom styles sɛ wode CSS a wɔaboaboa ano no redi dwuma a. Sɛ wɔde nsakraeɛ dodoɔ bi di dwuma a, hwɛ sɛ wɔadi kan akyerɛkyerɛ nsakraeɛ nsakraeɛ no mu (sɛ nhwɛsoɔ no transition: transform 2s ease, opacity .5s ease-out
).
Sass
Nneɛma a Ɛsakra
$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`)
$carousel-dark-indicator-active-bg: $black;
$carousel-dark-caption-color: $black;
$carousel-dark-control-icon-filter: invert(1) grayscale(100);
Sɛnea wɔde di dwuma
Via data su ahorow so
Fa data attributes di dwuma na ama ɛnyɛ den sɛ wobɛhwɛ carousel no gyinabea so. data-bs-slide
gye nsɛmfua titiriw prev
anaa next
, a ɛsakra slide gyinabea no toto ne gyinabea a ɛwɔ hɔ mprempren no ho. Sɛnea ɛbɛyɛ foforo no, fa di dwuma data-bs-slide-to
de fa raw slide index kɔ carousel no so data-bs-slide-to="2"
, a ɛsakra slide no gyinabea kɔ index pɔtee bi a efi ase wɔ 0
.
Wɔde data-bs-ride="carousel"
su no di dwuma de hyɛ carousel agyirae sɛ ɛyɛ anigye a efi ase wɔ kratafa a wɔde hyɛ mu. Sɛ woamfa anhyɛ data-bs-ride="carousel"
wo carousel no ase a, ɛsɛ sɛ w’ankasa wohyɛ ase. Wontumi mfa nni dwuma nka (redundant ne unnecessary) pefee JavaScript mfiase a ɛwɔ carousel koro no ara ho.
Ɛdenam JavaScript so
Frɛ carousel denam nsa so de:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Nneɛma a wubetumi apaw
Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-
, sɛnea ɛwɔ data-bs-interval=""
.
Din | Korɔ | Mfiaseɛ | Nkyerɛmu |
---|---|---|---|
interval |
nɔma | 5000 |
Bere dodow a ɛsɛ sɛ wɔtwentwɛn so wɔ ade bi a wɔde sakre tu kwan ankasa ntam. Sɛ false , carousel rentumi nkɔ kyinhyia ankasa. |
keyboard |
boolean ho asɛm | true |
Sɛ ebia ɛsɛ sɛ carousel no yɛ n’ade wɔ nsɛm a esisi wɔ keyboard so no ho anaa. |
pause |
ahama | boolean ho asɛm | 'hover' |
Sɛ wode si Wɔ mfiri a wɔde nsa ka so no so no, sɛ wode si |
ride |
ahama | boolean ho asɛm | false |
Autoplays carousel no bere a nea ɔde di dwuma no de ne nsa abɔ ade a edi kan no akyi. Sɛ wode si 'carousel' , autoplays carousel no wɔ load so. |
wrap |
boolean ho asɛm | true |
Sɛ́ ebia ɛsɛ sɛ carousel no di sakre bere nyinaa anaasɛ ɛwɔ gyinabea a ɛyɛ den. |
touch |
boolean ho asɛm | true |
Sɛ ebia ɛsɛ sɛ carousel no boa benkum/nifa swipe nkitahodi wɔ touchscreen mfiri ahorow so anaa. |
Akwan a wɔfa so yɛ
Asynchronous akwan ne nsakrae ahorow
API akwan nyinaa yɛ asynchronous na ɛhyɛ nsakrae ase . Wɔsan kɔ nea ɔfrɛ no no nkyɛn bere a wɔafi nsakrae no ase ara pɛ nanso ansa na aba awiei . Nea ɛka ho no, wobebu ani agu ɔkwan a wɔfa so frɛ ade bi a ɛrekɔ so no so .
Wubetumi de carousel constructor no ayɛ carousel nhwɛso, sɛ nhwɛso no, de ahyɛ ase de akwan foforo a wobɛpaw na woafi ase akɔ sakre so afa nneɛma mu:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Ɔkwan | Nkyerɛmu |
---|---|
cycle |
Kyinkyin fa carousel nneɛma no mu fi benkum kɔ nifa. |
pause |
Siw carousel no kwan sɛ ɛnsɛ sɛ ɔde sakre fa nneɛma mu. |
prev |
Kyinkyin kɔ ade a atwam no so. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a atwam no (sɛ nhwɛso no, ansa na slid.bs.carousel asɛm no asi). |
next |
Kyinkyin kɔ ade a edi hɔ no so. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a edi hɔ no (sɛ nhwɛso no, ansa na slid.bs.carousel asɛm no asi). |
nextWhenVisible |
Mfa cycle carousel nkɔ next bere a krataafa no ntumi nhu anaasɛ carousel no anaa n’awofo no ntumi nhu no. San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a wɔde asi wɔn ani so no |
to |
Cycles carousel no kɔ frame pɔtee bi so (0 a egyina so, a ɛte sɛ array). San kɔ nea ɔfrɛ no no nkyɛn ansa na wɔakyerɛ ade a wɔde asi wɔn ani so no (sɛ nhwɛso no, ansa na slid.bs.carousel asɛm no asi). |
dispose |
Ɔsɛe element bi carousel. (Eyi data a wɔde asie wɔ DOM element no so) |
getInstance |
Static kwan a ɛma wo kwan ma wo nya carousel instance a ɛbata DOM element bi ho, wubetumi de adi dwuma sɛnea eyi te:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Static kwan a ɛsan de carousel nhwɛso a ɛbata DOM element ho anaasɛ ɛbɔ foforo sɛ ɛba sɛ wɔanhyɛ ase a. Wubetumi de adi dwuma sɛnea ɛte yi:bootstrap.Carousel.getOrCreateInstance(element) |
Nsɛm a esisi
Bootstrap carousel adesuakuw no da nsɛm abien a esisi ma hooking kɔ carousel dwumadi mu adi. Nsɛm abien no nyinaa wɔ nneɛma foforo a edidi so yi:
direction
: Ɔkwan a carousel no retwe ("left"
anaasɛ"right"
).relatedTarget
: DOM element a wɔretwetwe akɔ ne gyinabea sɛ ade a ɛyɛ adwuma.from
: Ade a ɛwɔ hɔ mprempren no ho indexto
: Ade a edi hɔ no ho index
Wɔtow carousel nsɛm a esisi nyinaa tow gu carousel no ankasa so (kyerɛ sɛ wɔ <div class="carousel">
).
Adeyɛ no su | Nkyerɛmu |
---|---|
slide.bs.carousel |
Fires ntɛm ara bere a slide wɔafrɛ instance kwan no. |
slid.bs.carousel |
Wɔtow tuo bere a carousel no awie ne slide nsakrae no. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})