Carousel ƒe ƒuƒoƒo
Slide-ɖeɖefia ƒe akpa aɖe si wotsɔa kekeli toa nu veviwo me—nɔnɔmetatawo alo nuŋɔŋlɔwo ƒe slidewo—abe carousel ene.
Ale si wòwɔa dɔe
Carousel la nye slideshow na kekeli to emenyawo kplɔ wo nɔewo ɖo me, wotu kple CSS 3D tɔtrɔwo kple JavaScript vi aɖe. Ewɔa dɔ kple nɔnɔmetata, nuŋɔŋlɔ, alo dzesidenu siwo wowɔ ɖe ɖoɖo nu. Elɔ kpekpeɖeŋu nana dziɖuɖu siwo va yi/siwo kplɔe ɖo kple dzesiwo hã ɖe eme.
Le web-browser siwo me wodoa alɔ Page Visibility API la, carousel la aƒo asa na ʋuʋu ne webpage la mele dzedzem na ezãla o (abe ne browser tab la mele dɔ wɔm o, browser ƒe fesrea dzi ɖe kpɔtɔ, kple bubuawo ene).
prefers-reduced-motion
nyadzɔdzɔgblɔmɔnuwo ƒe nyabiasea dzi. Kpɔ
míaƒe mɔnukpɔkpɔwo ŋuti nuŋlɔɖiwo ƒe akpa si woɖe dzi kpɔtɔ .
Taflatse nyae be womedoa alɔ nested carousels o, eye zi geɖe la, carousels mewɔna ɖe mɔɖeɖe ƒe dzidzenuwo dzi o.
Kpɔɖeŋu
Carousels mewɔa slide ƒe didimewo wòsɔna ɖe ɖoɖo nu le wo ɖokui si o. Esi wòle alea ta la, ɖewohĩ ahiã be nàzã dɔwɔnu bubuwo alo atsyã siwo nèwɔ ɖe ɖoɖo nu atsɔ adzidze nyatakakawo ƒe lolome wòasɔ. Togbɔ be carousels doa alɔ dziɖuɖu kple dzesi siwo do ŋgɔ/si kplɔe ɖo hã la, womebia tso wo si tẽ o. Tsɔ kpe ɖe eŋu eye nàtrɔ asi le eŋu alesi nèkpɔe be esɔ.
Ele .active
be woatsɔ klass la akpe ɖe slideawo dometɔ ɖeka ŋu ne menye nenema o la, carousel la madze o. Azɔ hã kpɔ egbɔ be yeɖo tɔxɛ aɖe id
ɖe .carousel
na tiatiawɔblɔɖe ƒe dziɖuɖuwo dzi, vevietɔ ne èle carousel geɖe zãm le axa ɖeka dzi. Ele be data-bs-target
nɔnɔme (alo href
na kadodowo) nanɔ dziɖuɖu kple dzesi ƒe akpawo si si sɔ kple id
akpaa .carousel
tɔ.
Slides ɖeɖeko
Carousel si me slidewo koe le lae nye esi. .d-block
De dzesii be kple le carousel nɔnɔmetatawo dzi ƒe anyinɔnɔ .w-100
be nàxe mɔ ɖe browser ƒe nɔnɔmetatawo ƒe ��oɖowɔwɔ ɖe ɖoɖo nu nu.
<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>
Kple nusiwo dzi woaɖu
Tsɔ kpe ɖe dziɖuɖu siwo do ŋgɔ kple esiwo kplɔe ɖo ŋu. Míele aɖaŋu ɖom be nàzã <button>
elements, gake àteŋu azã <a>
elements kple 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>
Kple dzesiwo
Àte ŋu atsɔ dzesiawo hã akpe ɖe carousel la ŋu, kpe ɖe dziɖunuwo ŋu, hã.
<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>
Kple nuŋɔŋlɔ siwo le ete
Tsɔ nyawo kpe ɖe wò slidewo ŋu bɔbɔe kple .carousel-caption
element si le ɖesiaɖe me .carousel-item
. Woate ŋu aɣla wo bɔbɔe ɖe nukpɔkpɔ suewo dzi, abe alesi woɖee fia le ete ene, kple nukpɔkpɔ ƒe dɔwɔnu siwo woate ŋu atia . Míeɣlaa wo le gɔmedzedzea me kple .d-none
eye míegbugbɔa wo vaa mɔ̃ siwo lolo titina dzi kple .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 ƒe ƒuƒoƒo
Tsɔe kpe .carousel-fade
ɖe wò carousel ŋu be nàna slidewo nawɔ agbe kple fade transition ɖe slide teƒe.
<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>
Ame ɖekaɖekawo .carousel-item
ƒe dometsotso
Tsɔ kpe data-bs-interval=""
ɖe a .carousel-item
ŋu be nàtrɔ ɣeyiɣi si nàhe ɖe megbe le gasɔdodo le eɖokui si yi nu si kplɔe ɖo gbɔ dome.
<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>
Tsɔ asikaka asikaka ŋu ƒe ʋuʋu ŋu dɔ
Carousels doa alɔ asiɖeɖe le miame/ɖusime le touchscreen-mɔ̃wo dzi be nàʋuʋu le slidewo dome. Woateŋu atɔ te esia to data-bs-touch
nɔnɔmea zazã me. Kpɔɖeŋu si le ete hã metsɔ data-bs-ride
nɔnɔmea de eme o eye wòle data-bs-interval="false"
ale be mewɔa autoplay o.
<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>
Viviti ƒe tɔtrɔ
Tsɔ kpe .carousel-dark
ɖe eŋu .carousel
hena dziɖuɖu siwo do viviti wu, dzesiwo, kple nuŋɔŋlɔwo. Wotrɔ dziɖuɖuwo tso woƒe ɣi yɔyɔ gbãtɔ me kple filter
CSS ƒe nɔnɔme. Sass ƒe tɔtrɔ bubuwo le nuŋɔŋlɔwo kple dziɖuɖuwo ŋu siwo trɔa asi le color
kple 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>
Tɔtrɔ si wowɔ ɖe ɖoɖo nu
Woateŋu atrɔ tɔtrɔ ƒe ɣeyiɣi didime ƒe .carousel-item
kple $carousel-transition-duration
Sass ƒe tɔtrɔ hafi aƒo ƒu alo atsyã tɔxɛwo ne èle CSS si woƒo ƒu la zãm. Ne wozã tɔtrɔ geɖewo la, kpɔ egbɔ be woɖe tɔtrɔ ƒe tɔtrɔa gɔme gbã (le kpɔɖeŋu me transition: transform 2s ease, opacity .5s ease-out
).
Sass ƒe nyawo
Nusiwo trɔna
$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);
Zãzã
To nyatakaka ƒe nɔnɔmewo dzi
Zã data attributes nàtsɔ akpɔ carousel la ƒe nɔƒe dzi bɔbɔe. data-bs-slide
xɔa nya veviawo prev
alo next
, si trɔa slide ƒe nɔnɔme ne wotsɔe sɔ kple afisi wòle fifia. Alo zãe data-bs-slide-to
nàtsɔ atsɔ slide index si womewɔ o la ayi carousel data-bs-slide-to="2"
la gbɔ , si trɔa slide la ƒe nɔƒe ɖe index aɖe koŋ si dzea egɔme kple 0
.
Wozãa data-bs-ride="carousel"
nɔnɔmea tsɔ dea dzesi carousel be enye animating si dzea egɔme tso axa ƒe agbatsɔtsɔ dzi. Ne data-bs-ride="carousel"
mèzãe tsɔ dze wò carousel gɔme o la, ele be wò ŋutɔ nàdze egɔme. Womateŋu azãe kpe ɖe (si mehiã o kple esi mehiã o) JavaScript gɔmedzedze si me kɔ le carousel ɖeka ma ke ŋu o.
To JavaScript dzi
Yɔ carousel kple asi kple:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Tiatiawɔblɔɖewo
Woateŋu atsɔ tiatiawɔblɔɖewo ato nyatakaka ƒe nɔnɔmewo alo JavaScript dzi. Le nyatakaka ƒe nɔnɔmewo gome la, tsɔ tiatia ƒe ŋkɔ kpe ɖe data-bs-
, abe alesi wòle le data-bs-interval=""
.
Ŋkɔ | Ƒomevi | Gᴐmedzeƒe | Nuɖᴐɖᴐ |
---|---|---|---|
interval |
xexlẽdzesi | 5000 |
Ɣeyiɣi agbɔsɔsɔme si woatsɔ ahe ɖe megbe le nu aɖe ƒe gasɔdodo le eɖokui si dome. Ne false , carousel mazɔ le eɖokui si o. |
keyboard |
boolean ƒe ƒuƒoƒo | true |
Nenye be ele be carousel la nawɔ nu ɖe keyboard ƒe nudzɔdzɔwo ŋu. |
pause |
kaƒoƒo | boolean ƒe ƒuƒoƒo | 'hover' |
Ne woɖoe ɖe Le mɔ̃ siwo ŋu woate ŋu aka asi nu ɖo dzi la, ne woɖoe ɖe |
ride |
kaƒoƒo | boolean ƒe ƒuƒoƒo | false |
Eƒoa carousel la le eɖokui si ne ezãla tsɔ asi ƒo nu gbãtɔa vɔ. Ne woɖoe ɖe 'carousel' , eƒoa carousel la le eɖokui si le agba me. |
wrap |
boolean ƒe ƒuƒoƒo | true |
Nenye be ele be carousel la nanɔ gasɔ tsam atraɖii alo be wòatɔ sesĩe. |
touch |
boolean ƒe ƒuƒoƒo | true |
Nenye be ele be carousel la nado alɔ miame/ɖusime swipe ƒe kadodowo le touchscreen-mɔ̃wo dzi. |
Mɔnuwo
Mɔnu siwo mewɔ ɖeka kple ɣeyiɣi aɖeke o kple tɔtrɔwo
API mɔnuwo katã nye asynchronous eye wodzea tɔtrɔ gɔme . Wotrɔna yia ame si le ka ƒom na la gbɔ ne wonya dze tɔtrɔa gɔme ko gake hafi wòwu enu . Tsɔ kpe ɖe eŋu la, woaŋe aɖaba aƒu mɔnu ƒe yɔyɔ aɖe dzi le akpa si le tɔtrɔm dzi .
Àteŋu awɔ carousel ƒe kpɔɖeŋu kple carousel xɔtula, le kpɔɖeŋu me, be nàdze egɔme kple tiatia bubuwo eye nàdze gasɔdodo gɔme to nuawo me:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Nuwɔmɔnu | Nuɖᴐɖᴐ |
---|---|
cycle |
Tsitsatsa to carousel-nuawo me tso miame yi ɖusime. |
pause |
Exea mɔ na carousel la be wòagazɔ to nuwo me o. |
prev |
Tsitre ɖe nusi do ŋgɔ ŋu. Trɔ yi ame si yɔe gbɔ hafi woɖe nusi do ŋgɔ la fia (le kpɔɖeŋu me, hafi slid.bs.carousel nudzɔdzɔa nadzɔ). |
next |
Tsitre ɖe nu si kplɔe ɖo ŋu. Trɔ yi amesi yɔe gbɔ hafi woɖe nusi kplɔe ɖo fia (le kpɔɖeŋu me, hafi slid.bs.carousel nudzɔdzɔa nadzɔ). |
nextWhenVisible |
Mègatsɔ gasɔ na carousel ayi next ne axaa mele dzedzem o alo carousel la alo edzila mele dzedzem o. Trɔ yi amesi yɔe gbɔ hafi woɖe nusi woɖo taɖodzinu na la fia |
to |
Trɔ carousel la ɖe frame aɖe koŋ dzi (0 si wotu ɖe edzi, si sɔ kple array). Trɔ yi ame si yɔe gbɔ hafi woɖe nusi woɖo taɖodzinu na la fia (le kpɔɖeŋu me, hafi slid.bs.carousel nudzɔdzɔa nadzɔ). |
dispose |
Egblẽa nu le element aɖe ƒe carousel ŋu. (Eɖea nyatakaka siwo wodzra ɖo ɖe DOM ƒe akpaa dzi ɖa) |
getInstance |
Static mɔnu si ɖea mɔ na wò be nàxɔ carousel ƒe kpɔɖeŋu si do ƒome kple DOM element aɖe, àteŋu azãe ale:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Static mɔnu si trɔa carousel ƒe kpɔɖeŋu si do ƒome kple DOM element alo wɔa yeye nenye be womedze egɔme o. Àte ŋu azãe ale:bootstrap.Carousel.getOrCreateInstance(element) |
Nudzɔdzɔwo
Bootstrap ƒe carousel klass ɖea nudzɔdzɔ eve ɖe go na hooking ɖe carousel dɔwɔwɔ me. Nɔnɔme bubu siwo gbɔna la le nudzɔdzɔ eveawo siaa ŋu:
direction
: Mɔ si dzi carousel la le ʋuʋum ɖo ("left"
alo alo"right"
).relatedTarget
: DOM ƒe akpa si wole ʋuʋum ɖe teƒea abe nu si le dɔ wɔm ene.from
: Nusi li fifia ƒe indexto
: Nu si kplɔe ɖo ƒe index
Wodaa tu carousel nudzɔdzɔwo katã ɖe carousel la ŋutɔ dzi (si nye le <div class="carousel">
).
Nudzɔdzɔ ƒomevi | Nuɖᴐɖᴐ |
---|---|
slide.bs.carousel |
Dzoa enumake ne woyɔ slide kpɔɖeŋu mɔnu la. |
slid.bs.carousel |
Wodoa dzoe ne carousel la wu eƒe slide ƒe tɔtrɔ nu. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})