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.
Ọ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-bs-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-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>
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-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>
Na egosi
Ịnwekwara ike ịgbakwunye ihe ngosi na carousel, n'akụkụ njikwa, kwa.
<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>
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-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
Tinye .carousel-fade
na carousel gị ka ọ na-eme ihe nkiri slide nwere mgbanwe na-ada ada kama slide.
<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>
.carousel-item
Ogologo oge n'otu n'otu
Tinye data-bs-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-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>
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-bs-touch
njirimara. Ihe atụ dị n'okpuru anaghị agụnye data-bs-ride
njirimara ma nwee data-bs-interval="false"
ya mere na ọ naghị akpaghị aka.
<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>
Ụdị gbara ọchịchịrị
Tinye .carousel-dark
na .carousel
maka njikwa gbara ọchịchịrị, egosi, na nkọwa okwu. Atụgharịla njikwa site na njupụta ọcha ha na akụrụngwa filter
CSS. Isi okwu na njikwa nwere mgbanwe Sass ndị ọzọ na-ahazi color
na 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>
Ntughari omenala
Enwere ike ịgbanwe oge mgbanwe .carousel-item
site na $carousel-transition-duration
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
).
Sass
Mgbanwe
$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);
Ojiji
Site na njirimara data
Jiri njirimara data iji jikwaa ọnọdụ carousel ngwa ngwa. data-bs-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-bs-slide-to
iji nyefee akara ngosi mmịfe raw na carousel data-bs-slide-to="2"
, nke na-atụgharị ọnọdụ mmịfe ahụ gaa n'otu ndeksi malite na 0
.
A data-bs-ride="carousel"
na-eji njirimara ahụ akara carousel ka ọ na-amalite na ibu ibe. Ọ bụrụ na ị naghị eji data-bs-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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Nhọrọ
Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-bs-
, dị ka ọ dị na data-bs-interval=""
.
Aha | Ụdị | Ọdabara | Nkọwa |
---|---|---|---|
interval |
nọmba | 5000 |
Ogologo oge igbu oge n'etiti ịnya igwe na-akpaghị aka. Ọ bụrụ false , carousel agaghị agba okirikiri na-akpaghị aka. |
keyboard |
boolean | true |
Ma carousel kwesịrị imeghachi omume na mmemme ahụigodo. |
pause |
eriri | boolean | 'hover' |
Ọ bụrụ na ịtọ ya Na ngwaọrụ enyere aka, mgbe atọrọ na |
ride |
eriri | boolean | false |
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. |
wrap |
boolean | true |
Ma carousel kwesịrị ịnya okirikiri ma ọ bụ nwee nkwụsị siri ike. |
touch |
boolean | true |
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 .
Ị nwere ike ịmepụta ihe atụ carousel na onye na-arụ ọrụ carousel, dịka ọmụmaatụ, iji malite nhọrọ ndị ọzọ wee malite ịnya igwe site na ihe:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Usoro | Nkọwa |
---|---|
cycle |
Na-agagharị na ihe carousel site n'aka ekpe gaa n'aka nri. |
pause |
Na-akwụsị carousel site n'ịgba ígwè na ihe. |
prev |
Ọkpụkpụ gaa na ihe gara aga. Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe gara aga (dịka, tupu slid.bs.carousel mmemme emee). |
next |
Chọgharịa gaa na ihe na-esote. Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe na-esote (dịka, tupu slid.bs.carousel mmemme emee). |
nextWhenVisible |
Anyagharịla carousel gaa na-esote mgbe ahụghị ibe ahụ ma ọ bụ carousel ma ọ bụ nne na nna ya ahụghị. Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe ezubere iche |
to |
Na-eme okirikiri carousel gaa n'otu etiti (0 dabere, yiri n'usoro). Na-alaghachikwute onye na-akpọ oku tupu egosiri ihe ezubere iche (dịka, tupu slid.bs.carousel mmemme emee). |
dispose |
Na-ebibi carousel nke element. (Na-ewepụ data echekwara na mmewere DOM) |
getInstance |
Usoro static nke na-enye gị ohere ịnweta ihe atụ carousel jikọtara ya na ihe DOM, ị nwere ike iji ya dị ka nke a:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Usoro static nke na-eweghachi ihe atụ carousel jikọtara na ihe DOM ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya. Ị nwere ike iji ya dị ka nke a:bootstrap.Carousel.getOrCreateInstance(element) |
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 |
Na-agba ọkụ ozugbo slide a kpọkuru usoro ihe atụ. |
slid.bs.carousel |
Agba ọkụ mgbe carousel mechaala ngbanwe slide ya. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})