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).
Mmetụta animation nke akụrụngwa a dabere na 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ọọ id pụrụ iche 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 nke .carousel
mmewere.
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.
Na njikwa
Na-agbakwụnye na njikwa gara aga na nke na-esote:
Na egosi
Ịnwekwara ike ịgbakwunye ihe ngosi na carousel, n'akụkụ njikwa, kwa.
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
.
Crossfade
Tinye .carousel-fade
na carousel gị ka ọ na-eme ihe nkiri slide nwere mgbanwe na-ada ada kama slide.
.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ọ.
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:
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ụ na ụgha, 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 "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('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. |
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
).