Carousel
Ngwa ihe ngosi mmịfe maka ịgba ígwè site na ọcha—onyinyo ma ọ bụ slides nke ederede—dị ka carousel.
Ka o si arụ ọrụ
Carousel bụ ihe ngosi mmịfe maka ịgba ígwè site na usoro ọdịnaya, nke ejiri mgbanwe CSS 3D wuo yana ntakịrị Javascript. Ọ na-arụ ọrụ na usoro onyonyo, ederede, ma ọ bụ akara aha omenala. Ọ gụnyekwara nkwado maka njikwa gara aga/ na-esote yana egosi.
N'ime ihe nchọgharị ebe a na-akwado API Visibility Page , carousel ga-ezere mbanye mgbe onye ọrụ na-ahụghị ibe weebụ (dị ka mgbe taabụ nchọgharị anaghị arụ ọrụ, ebelata windo ihe nchọgharị, wdg).
prefers-reduced-motion
ajụjụ mgbasa ozi. Hụ akụkụ
ngagharị ewelatala nke akwụkwọ nnweta anyị .
Biko mara na anaghị akwado carousels akwụ ụgwọ, yana carousels anaghị agbaso ụkpụrụ nnweta.
N'ikpeazụ, ọ bụrụ na ị na-ewu Javascript anyị site na isi iyi, ọ chọrọutil.js
.
Ọmụmaatụ
Carousels anaghị emegharị akụkụ slide ozugbo. Dị ka nke a, ị nwere ike ịchọ iji ngwa ngwa ma ọ bụ ụdị ahaziri ahazi iji wepụta ọdịnaya nke ọma. Ọ bụ ezie na carousels na-akwado njikwa gara aga/na-esote na egosi, a chọghị ha n'ụzọ doro anya. Tinye ma hazie ka ọ dị gị mma.
Ekwesịrị .active
ịgbakwunye klas ahụ n'otu n'ime ihe nkiri ahụ ma ọ bụghị na carousel agaghị ahụ anya. Jide n'aka na ịtọọ ihe pụrụ iche id
na .carousel
njikwa nhọrọ, ọkachasị ma ọ bụrụ na ị na-eji ọtụtụ carousels n'otu ibe. Ihe njikwa na egosi ga-enwerịrị njiri mara data-target
(ma ọ bụ href
maka njikọ) dabara na id
mmewere .carousel
.
Naanị ihe mmịfe
Nke a bụ carousel nwere naanị slide. Rịba ama ọnụnọ nke .d-block
na .w-100
foto carousel iji gbochie ndakọrịta ihe nchọgharị ndabere ndabere.
<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>
Na njikwa
Na-agbakwụnye na njikwa gara aga na nke ọzọ. Anyị na-akwado iji <button>
ihe, mana ị nwekwara ike iji <a>
ihe nwere 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>
Na egosi
Ịnwekwara ike ịgbakwunye ihe ngosi na carousel, n'akụkụ njikwa, kwa.
<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>
Site na nkọwa okwu
Tinye nkọwa okwu na slide gị n'ụzọ dị mfe na .carousel-caption
mmewere dị n'ime nke ọ bụla .carousel-item
. Enwere ike zoo ha n'ụzọ dị mfe na obere nlele, dị ka egosiri n'okpuru ebe a, yana ihe ngosi nhọrọ . Anyị na-eji ezobe ha na mbụ .d-none
wee weghachi ha na ngwaọrụ ndị nwere ọkara .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>
Crossfade
Tinye .carousel-fade
na carousel gị ka ọ na-eme ihe nkiri slide nwere mgbanwe na-ada ada kama slide. Dabere na ọdịnaya carousel gị (dịka ọmụmaatụ, ederede naanị slide), ị nwere ike ịtinye .bg-body
ma ọ bụ ụfọdụ CSS omenala na .carousel-item
s maka ịfefe kwesịrị ekwesị.
<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
Ogologo oge n'otu n'otu
Tinye data-interval=""
na a .carousel-item
iji gbanwee oge ị ga-egbu oge n'etiti ịgba ígwè na-akpaghị aka gaa na ihe ọzọ.
<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>
Gbanyụọ mmetụ aka
Carousels na-akwado ịpị aka ekpe/aka nri na ngwaọrụ ihuenyo mmetụ ka ịkwaga n'etiti ihe mmịfe. Enwere ike gbanyụọ nke a site na iji data-touch
njirimara. Ihe atụ dị n'okpuru anaghị agụnye data-ride
njirimara ma nwee data-interval="false"
ya mere na ọ naghị akpaghị aka.
<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>
Ojiji
Site na njirimara data
Jiri njirimara data iji jikwaa ọnọdụ carousel ngwa ngwa. data-slide
na-anabata mkpụrụokwu prev
ma ọ bụ next
, nke na-agbanwe ọnọdụ slide dabere na ọnọdụ ya ugbu a. N'aka nke ọzọ, jiri data-slide-to
iji nyefee akara ngosi mmịfe raw na carousel data-slide-to="2"
, nke na-atụgharị ọnọdụ mmịfe ahụ gaa n'otu ndeksi malite na 0
.
A data-ride="carousel"
na-eji njirimara ahụ akara carousel ka ọ na-amalite na ibu ibe. Ọ bụrụ na ị naghị eji data-ride="carousel"
mmalite carousel gị, ị ga-amalite ya n'onwe gị. Enweghị ike iji ya na (nke na-adịghị mkpa na enweghị isi) mmalite Javascript doro anya nke otu carousel.
Site JavaScript
Jiri aka kpọọ carousel:
$('.carousel').carousel()
Nhọrọ
Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-
, dị ka ọ dị na data-interval=""
.
Aha | Ụdị | Ọdabara | Nkọwa |
---|---|---|---|
etiti oge | nọmba | 5000 | Ogologo oge igbu oge n'etiti ịnya igwe na-akpaghị aka. Ọ bụrụ false , carousel agaghị agba okirikiri na-akpaghị aka. |
ahụigodo | boolean | eziokwu | Ma carousel kwesịrị imeghachi omume na mmemme ahụigodo. |
kwụsịtụ | eriri | boolean | 'hover' | Ọ bụrụ na ịtọ ya Na ngwaọrụ enyere aka, mgbe atọrọ na |
gbaa | eriri | ụgha | Na-egwu carousel na-akpaghị aka mgbe onye ọrụ jiri aka gbachie ihe mbụ. Ọ bụrụ na edobere ya 'carousel' , na-egwu carousel na ibu. |
kechie | boolean | eziokwu | Ma carousel kwesịrị ịnya okirikiri ma ọ bụ nwee nkwụsị siri ike. |
imetụ aka | boolean | eziokwu | Ma carousel kwesịrị ịkwado mmekọrịta swipe aka ekpe/aka nri na ngwaọrụ ihuenyo mmetụ aka. |
Ụzọ
Ụzọ asynchronous na ntụgharị
Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .
.carousel(options)
Na-ebute carousel na nhọrọ nhọrọ object
wee malite ịnya igwe site na ihe.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Na-agagharị na ihe carousel site n'aka ekpe gaa n'aka nri.
.carousel('pause')
Na-akwụsị carousel site n'ịgba ígwè na ihe.
.carousel(number)
Na-eme okirikiri carousel gaa n'otu etiti (0 dabere, yiri n'usoro). Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe ezubere iche (ya bụ, tupu slid.bs.carousel
mmemme emee).
.carousel('prev')
Ọkpụkpụ gaa na ihe gara aga. Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe gara aga (ya bụ tupu slid.bs.carousel
mmemme emee).
.carousel('next')
Chọgharịa gaa na ihe na-esote. Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe na-esote (ya bụ tupu slid.bs.carousel
mmemme emee).
.carousel('dispose')
Na-ebibi carousel nke element.
.carousel('nextWhenVisible')
Anyagharịla carousel gaa na-esote mgbe ahụghị ibe ahụ ma ọ bụ carousel ma ọ bụ nne na nna ya anaghị ahụ ya. Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe na-esote (ya bụ tupu slid.bs.carousel
mmemme emee).
.carousel('to')
Na-eme okirikiri carousel gaa n'otu etiti (0 dabere, yiri n'usoro). Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe na-esote (ya bụ tupu slid.bs.carousel
mmemme emee).
Ihe omume
Klas carousel Bootstrap na-ekpughe ihe omume abụọ maka itinye aka na ọrụ carousel. Ihe omume abụọ a nwere ihe mgbakwunye ndị a:
direction
: Ntuziaka nke carousel na-amị amị (ma"left"
ọ bụ"right"
).relatedTarget
: Ihe DOM nke a na-agbanye n'ime ebe dị ka ihe na-arụ ọrụ.from
: Ndekọ nke ihe dị ugbu ato
: Ndekọ ihe na-esote
A na-agbapụ ihe omume carousel niile na carousel n'onwe ya (ya bụ na <div class="carousel">
).
Ụdị mmemme | Nkọwa |
---|---|
slide.bs.carousel | Ihe omume a na-agba ọkụ ozugbo slide a kpọkuru usoro ihe atụ. |
slid.bs.carousel | A na-agbapụ ihe omume a mgbe carousel mechachara mgbanwe slide ya. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Gbanwee oge mgbanwe
Enwere ike ịgbanwe oge mgbanwe .carousel-item
site na $carousel-transition
mgbanwe Sass tupu achịkọta ma ọ bụ ụdị omenala ma ọ bụrụ na ị na-eji CSS achịkọtara. Ọ bụrụ na etinyere ọtụtụ mgbanwe, hụ na a kọwapụtara mgbanwe mgbanwe na mbụ (dịka ọmụmaatụ transition: transform 2s ease, opacity .5s ease-out
).