Carousel
Pàirt taisbeanadh-shleamhnagan airson rothaireachd tro eileamaidean - ìomhaighean no sleamhnagan teacsa - mar carousel.
Mar a tha e ag obair
Tha an carousel na thaisbeanadh-shleamhnagan airson rothaireachd tro shreath de shusbaint, air a thogail le cruth-atharrachaidhean CSS 3D agus beagan JavaScript. Bidh e ag obair le sreath de dhealbhan, teacsa, no comharrachadh àbhaisteach. Tha e cuideachd a’ toirt a-steach taic airson smachdan agus comharran a bh’ ann roimhe/a-rithist.
Ann am brobhsairean far a bheil taic aig Page Visibility API , seachnaidh an carousel sleamhnachadh nuair nach fhaic an neach-cleachdaidh an duilleag-lìn (leithid nuair a tha taba a’ bhrobhsair neo-ghnìomhach, tha uinneag a’ bhrobhsair air a lughdachadh, msaa).
prefers-reduced-motion
ceist nam meadhanan. Faic an
earrann gluasad lùghdaichte de na sgrìobhainnean ruigsinneachd againn .
Thoir an aire nach eil carousels neadachaidh a’ faighinn taic, agus mar as trice chan eil carousels a’ gèilleadh ri inbhean ruigsinneachd.
eisimpleir
Cha bhith carousels gu fèin-ghluasadach a’ gnàthachadh meudan sleamhnachaidh. Mar sin, is dòcha gum feum thu goireasan a bharrachd no stoidhlichean àbhaisteach a chleachdadh gus susbaint a mheudachadh gu h-iomchaidh. Ged a tha carousels a’ toirt taic do smachdan agus taisbeanairean a bh’ ann roimhe / an ath rud, chan eil feum orra gu sònraichte. Cuir ris agus gnàthaich mar a chì thu iomchaidh.
Feumar an .active
clas a chur ri aon de na sleamhnagan air neo cha bhi an carousel ri fhaicinn. Cuideachd dèan cinnteach gun cuir thu feart sònraichte id
air an .carousel
airson smachdan roghainneil, gu sònraichte ma tha thu a’ cleachdadh ioma carousels air aon duilleag. data-bs-target
Feumaidh buadh (no href
airson ceanglaichean) a bhith aig eileamaidean smachd agus comharra a tha a rèir id
an .carousel
eileamaid.
Sleamhnagan a-mhàin
Seo carousel le sleamhnagan a-mhàin. Thoir an aire gu bheil .d-block
agus .w-100
air ìomhaighean carousel gus casg a chuir air co-thaobhadh ìomhaigh bunaiteach a’ bhrobhsair.
<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>
Le smachdan
Cuir a-steach na smachdan roimhe agus an ath cheum. Tha sinn a’ moladh <button>
eileamaidean a chleachdadh, ach faodaidh tu cuideachd <a>
eileamaidean a chleachdadh le 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>
Le comharran
Faodaidh tu cuideachd na comharran a chur ris a 'charousel, còmhla ris na smachdan, cuideachd.
<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>
Le fo-thiotalan
Cuir fo-thiotalan ris na sleamhnagan agad gu furasta leis an .carousel-caption
eileamaid taobh a-staigh faidhle .carousel-item
. Faodaidh iad a bhith falaichte gu furasta air puirt-seallaidh nas lugha, mar a chithear gu h-ìosal, le goireasan taisbeanaidh roghainneil . Bidh sinn gan falach an toiseach le .d-none
agus gan toirt air ais air innealan meadhanach mòr le .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
Cuir .carousel-fade
ris an carousel agad gus sleamhnagan a bheothachadh le eadar-ghluasad seargach an àite sleamhnag.
<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
Eadar -ama fa leth
Cuir data-bs-interval=""
ri a .carousel-item
gus atharrachadh na h-ùine airson dàil eadar rothaireachd fèin-ghluasadach chun ath rud.
<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>
Cuir dheth suathadh suathaidh
Bidh carousels a’ toirt taic do shleamhnachadh clì / deas air innealan touchscreen gus gluasad eadar sleamhnagan. Faodar seo a chur à comas le bhith a’ cleachdadh a’ data-bs-touch
bhuadhan. Chan eil an eisimpleir gu h-ìosal cuideachd a’ toirt a-steach am data-bs-ride
feart agus data-bs-interval="false"
mar sin chan eil e fèin-chluich.
<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>
Caochladh dorcha
Cuir .carousel-dark
ris an .carousel
airson smachdan, comharran, agus fo-thiotalan nas dorcha. Chaidh smachdan a thionndadh bhon lìonadh geal àbhaisteach aca le filter
seilbh CSS. Tha caochladairean Sass a bharrachd aig fo-thiotalan agus smachdan a bhios a’ gnàthachadh an color
agus 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>
Eadar-ghluasad gnàthaichte
Faodar an ùine gluasaid .carousel-item
atharrachadh leis a’ $carousel-transition-duration
chaochladair Sass mus cuir thu ri chèile no stoidhlichean àbhaisteach ma tha thu a’ cleachdadh an CSS cruinnichte. Ma thèid ioma-ghluasadan a chuir an sàs, dèan cinnteach gu bheil an eadar-ghluasad cruth-atharrachaidh air a mhìneachadh an toiseach (me. transition: transform 2s ease, opacity .5s ease-out
).
Sass
Caochlaidhean
$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);
Cleachdadh
Tro fheartan dàta
Cleachd buadhan dàta gus smachd a chumail air suidheachadh a’ charousel gu furasta. data-bs-slide
a’ gabhail ris na prìomh fhaclan prev
no next
, a dh’ atharraicheas suidheachadh an t-sleamhnachaidh an coimeas ris an t-suidheachadh làithreach aige. Air an làimh eile, cleachd data-bs-slide-to
gus clàr-amais sleamhnag amh a thoirt don charousel data-bs-slide-to="2"
, a ghluaiseas suidheachadh an t-sleamhnag gu clàr-amais sònraichte a’ tòiseachadh le 0
.
Tha am data-bs-ride="carousel"
feart air a chleachdadh gus carousel a chomharrachadh mar bheothachadh a’ tòiseachadh aig luchdachadh duilleag. Mura cleachd data-bs-ride="carousel"
thu an carousel agad a thòiseachadh, feumaidh tu a thòiseachadh thu fhèin. Chan urrainnear a chleachdadh còmhla ri (gun fheum agus neo-riatanach) a’ tòiseachadh le JavaScript soilleir den aon charousel.
Air sgàth javascript
Cuir fòn gu carousel le làimh le:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-bs-
, mar ann an data-bs-interval=""
.
Ainm | Seòrsa | Deònach | Tuairisgeul |
---|---|---|---|
interval |
àireamh | 5000 |
An ùine airson dàil eadar rothaireachd gu fèin-ghluasadach air rud. Ma tha false , cha bhith carousel a’ rothaireachd gu fèin-ghluasadach. |
keyboard |
boolean | true |
Am bu chòir don carousel freagairt a thoirt do thachartasan meur-chlàr. |
pause |
sreang | boolean | 'hover' |
Ma tha thu deiseil Air innealan le comas suathaidh, nuair a thèid an suidheachadh gu |
ride |
sreang | boolean | false |
A ’cluich an carousel gu fèin-ghluasadach às deidh don neach-cleachdaidh a’ chiad rud a rothaireachd le làimh. Ma thèid a shuidheachadh gu 'carousel' , cluichidh e gu fèin-ghluasadach an carousel air luchd. |
wrap |
boolean | true |
Am bu chòir don charousel rothaireachd leantainneach no stadan cruaidh a bhith aige. |
touch |
boolean | true |
Am bu chòir don carousel taic a thoirt do eadar-obrachaidhean swipe clì/deas air innealan touchscreen. |
Dòighean-obrach
Modhan asyncronach agus eadar-ghluasadan
Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .
Faic na sgrìobhainnean JavaScript againn airson tuilleadh fiosrachaidh .
Faodaidh tu eisimpleir carousel a chruthachadh leis an neach-togail carousel, mar eisimpleir, gus tòiseachadh le roghainnean a bharrachd agus tòiseachadh air baidhsagal tro nithean:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Dòigh-obrach | Tuairisgeul |
---|---|
cycle |
Rothaich tro na stuthan carousel bho chlì gu deas. |
pause |
A’ cur stad air an carousel bho bhith a’ rothaireachd tro nithean. |
prev |
Cearcallan chun an rud roimhe. Tilleadh chun neach-fios mus deach an rud roimhe a shealltainn (me, mus tachair an slid.bs.carousel tachartas). |
next |
Rothaich chun an ath rud. Tilleadh chun neach-fios mus deach an ath rud a shealltainn (me, mus tachair an slid.bs.carousel tachartas). |
nextWhenVisible |
Na rothaich carousel chun ath fhear nuair nach eil an duilleag ri fhaicinn no nuair nach eil an carousel no a phàrant ri fhaicinn. Tillidh e chun neach-fios mus deach an rud targaid a shealltainn |
to |
Rothaich an carousel gu frèam sònraichte (stèidhichte 0, coltach ri sreath). Tilleadh chun neach-fios mus deach an rud targaid a shealltainn (me, mus tachair an slid.bs.carousel tachartas). |
dispose |
A 'sgrios carousel eileamaid. (Thoir air falbh dàta air a stòradh air an eileamaid DOM) |
getInstance |
Modh statach a leigeas leat an t-eisimpleir carousel fhaighinn co-cheangailte ri eileamaid DOM, faodaidh tu a chleachdadh mar seo:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Dòigh statach a thilleas eisimpleir carousel co-cheangailte ri eileamaid DOM no a chruthaicheas fear ùr gun fhios nach deach a thòiseachadh. Faodaidh tu a chleachdadh mar seo:bootstrap.Carousel.getOrCreateInstance(element) |
Tachartasan
Bidh clas carousel Bootstrap a’ nochdadh dà thachartas airson a bhith ceangailte ri gnìomhachd carousel. Tha na feartan a bharrachd a leanas aig an dà thachartas:
direction
: An taobh anns a bheil an carousel a’ sleamhnachadh (an dàrna cuid"left"
no"right"
).relatedTarget
: An eileamaid DOM a thathas a’ sleamhnachadh na àite mar an nì gnìomhach.from
: Clàr-innse an nì làithreachto
: Clàr-innse an ath nì
Tha a h-uile tachartas carousel air a losgadh aig a’ charousel fhèin (ie aig an <div class="carousel">
).
Seòrsa tachartas | Tuairisgeul |
---|---|
slide.bs.carousel |
Teine sa bhad nuair a thèid an slide dòigh eisimpleir a chleachdadh. |
slid.bs.carousel |
Air a losgadh nuair a tha an carousel air crìoch a chuir air a ghluasad sleamhnachaidh. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})