Carwsél
Elfen sioe sleidiau ar gyfer beicio trwy elfennau - delweddau neu sleidiau o destun - fel carwsél.
Sut mae'n gweithio
Mae'r carwsél yn sioe sleidiau ar gyfer beicio trwy gyfres o gynnwys, wedi'i adeiladu gyda thrawsnewidiadau CSS 3D ac ychydig o JavaScript. Mae'n gweithio gyda chyfres o ddelweddau, testun, neu farcio personol. Mae hefyd yn cynnwys cefnogaeth ar gyfer rheolaethau a dangosyddion blaenorol/nesaf.
Mewn porwyr lle mae'r API Gwelededd Tudalen yn cael ei gefnogi, bydd y carwsél yn osgoi llithro pan nad yw'r dudalen we yn weladwy i'r defnyddiwr (fel pan fydd tab y porwr yn anactif, ffenestr y porwr yn cael ei lleihau, ac ati).
prefers-reduced-motion
ymholiad y cyfryngau. Gweler
adran cynnig gostyngol ein dogfennaeth hygyrchedd .
Sylwch nad yw carwsél nythu yn cael eu cynnal, ac yn gyffredinol nid yw carwsél yn cydymffurfio â safonau hygyrchedd.
Yn olaf, os ydych chi'n adeiladu ein JavaScript o'r ffynhonnell, mae angenutil.js
.
Enghraifft
Nid yw carwsél yn normaleiddio dimensiynau sleidiau yn awtomatig. O'r herwydd, efallai y bydd angen i chi ddefnyddio cyfleustodau ychwanegol neu arddulliau arferol i faint cynnwys priodol. Er bod carwsél yn cefnogi rheolaethau a dangosyddion blaenorol/nesaf, nid oes eu hangen yn benodol. Ychwanegu ac addasu fel y gwelwch yn dda.
Mae .active
angen ychwanegu'r dosbarth at un o'r sleidiau neu ni fydd y carwsél yn weladwy. Hefyd gwnewch yn siŵr eich bod chi'n gosod unigryw id
ar y .carousel
rheolyddion dewisol, yn enwedig os ydych chi'n defnyddio carwsél lluosog ar un dudalen. Rhaid i elfennau rheoli a dangosydd gael data-target
priodoledd (neu href
ar gyfer dolenni) sy'n cyfateb id
i'r .carousel
elfen.
Sleidiau yn unig
Dyma garwsél gyda sleidiau yn unig. Sylwch ar bresenoldeb y delweddau carwsél .d-block
ac .w-100
arnynt i atal aliniad delwedd rhagosodedig y porwr.
<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>
Gyda rheolyddion
Ychwanegu rheolaethau blaenorol a nesaf i mewn. Rydym yn argymell defnyddio <button>
elfennau, ond gallwch hefyd ddefnyddio <a>
elfennau gyda 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>
Gyda dangosyddion
Gallwch hefyd ychwanegu'r dangosyddion at y carwsél, ochr yn ochr â'r rheolyddion, hefyd.
<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>
Gyda chapsiynau
Ychwanegwch gapsiynau i'ch sleidiau yn hawdd gyda'r .carousel-caption
elfen o fewn unrhyw .carousel-item
. Gellir eu cuddio'n hawdd ar fannau gwylio llai, fel y dangosir isod, gyda chyfleustodau arddangos dewisol . Rydyn ni'n eu cuddio i ddechrau gyda nhw .d-none
ac yn dod â nhw yn ôl ar ddyfeisiau maint canolig gyda .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>
Croesfade
Ychwanegwch .carousel-fade
at eich carwsél i animeiddio sleidiau gyda thrawsnewidiad pylu yn lle sleid. Yn dibynnu ar eich cynnwys carwsél (ee, sleidiau testun yn unig), efallai y byddwch am ychwanegu .bg-body
rhywfaint o CSS wedi'i deilwra at yr .carousel-item
s ar gyfer croes-baeddu priodol.
<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
Cyfwng unigol
Ychwanegu data-interval=""
at a .carousel-item
i newid faint o amser i oedi rhwng beicio'n awtomatig i'r eitem nesaf.
<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>
Analluogi swiping cyffwrdd
Mae carwsél yn cefnogi troi i'r chwith / dde ar ddyfeisiau sgrin gyffwrdd i symud rhwng sleidiau. Gall hyn gael ei analluogi gan ddefnyddio'r data-touch
briodwedd. Nid yw'r enghraifft isod ychwaith yn cynnwys y data-ride
priodoledd ac data-interval="false"
felly nid yw'n chwarae'n awtomatig.
<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>
Defnydd
Trwy briodoleddau data
Defnyddio priodoleddau data i reoli lleoliad y carwsél yn hawdd. data-slide
yn derbyn yr allweddeiriau prev
neu next
, sy'n newid safle'r sleidiau o'i gymharu â'i safle presennol. Fel arall, defnyddiwch data-slide-to
i basio mynegai sleidiau crai i'r carwsél data-slide-to="2"
, sy'n symud lleoliad y sleidiau i fynegai penodol gan ddechrau gyda 0
.
Defnyddir y data-ride="carousel"
briodwedd i nodi carwsél fel animeiddiad sy'n dechrau ar lwyth tudalen. Os nad ydych chi'n defnyddio data-ride="carousel"
i gychwyn eich carwsél, mae'n rhaid i chi ei gychwyn eich hun. Ni ellir ei ddefnyddio ar y cyd â chychwyniad JavaScript penodol (diangen a diangen) o'r un carwsél.
Trwy JavaScript
Ffoniwch y carwsél â llaw gyda:
$('.carousel').carousel()
Opsiynau
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-
, fel yn data-interval=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
cyfwng | rhif | 5000 | Faint o amser i oedi rhwng beicio eitem yn awtomatig. Os false , ni fydd carwsél yn beicio'n awtomatig. |
bysellfwrdd | boolaidd | gwir | A ddylai'r carwsél ymateb i ddigwyddiadau bysellfwrdd. |
saib | llinyn | boolaidd | 'hofran' | Os caiff ei osod Ar ddyfeisiadau cyffyrddiad, pan gaiff ei osod i |
marchogaeth | llinyn | ffug | Yn chwarae'r carwsél yn awtomatig ar ôl i'r defnyddiwr feicio'r eitem gyntaf â llaw. Os yw wedi'i osod i 'carousel' , yn chwarae'r carwsél ar lwyth yn awtomatig. |
lapio | boolaidd | gwir | A ddylai'r carwsél feicio'n barhaus neu gael stopiau caled. |
cyffwrdd | boolaidd | gwir | A ddylai'r carwsél gefnogi rhyngweithiadau sweip chwith/dde ar ddyfeisiau sgrin gyffwrdd. |
Dulliau
Dulliau a thrawsnewidiadau anghydamserol
Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .
.carousel(options)
Yn cychwyn y carwsél gydag opsiynau dewisol object
ac yn dechrau beicio trwy eitemau.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Beicio drwy'r eitemau carwsél o'r chwith i'r dde.
.carousel('pause')
Yn atal y carwsél rhag beicio trwy eitemau.
.carousel(number)
Yn beicio'r carwsél i ffrâm benodol (0 seiliedig, tebyg i arae). Yn dychwelyd i'r galwr cyn i'r eitem darged gael ei dangos (hy cyn i'r slid.bs.carousel
digwyddiad ddigwydd).
.carousel('prev')
Cylchoedd i'r eitem flaenorol. Yn dychwelyd i'r galwr cyn i'r eitem flaenorol gael ei dangos (hy cyn i'r slid.bs.carousel
digwyddiad ddigwydd).
.carousel('next')
Beiciau i'r eitem nesaf. Yn dychwelyd i'r galwr cyn i'r eitem nesaf gael ei dangos (hy cyn i'r slid.bs.carousel
digwyddiad ddigwydd).
.carousel('dispose')
Yn dinistrio carwsél elfen.
.carousel('nextWhenVisible')
Peidiwch â beicio'r carwsél i'r nesaf pan nad yw'r dudalen yn weladwy neu pan nad yw'r carwsél neu ei riant yn weladwy. Yn dychwelyd i'r galwr cyn i'r eitem nesaf gael ei dangos (hy cyn i'r slid.bs.carousel
digwyddiad ddigwydd).
.carousel('to')
Yn beicio'r carwsél i ffrâm benodol (0 seiliedig, tebyg i arae). Yn dychwelyd i'r galwr cyn i'r eitem nesaf gael ei dangos (hy cyn i'r slid.bs.carousel
digwyddiad ddigwydd).
Digwyddiadau
Mae dosbarth carwsél Bootstrap yn datgelu dau ddigwyddiad ar gyfer cysylltu â swyddogaethau carwsél. Mae gan y ddau ddigwyddiad yr eiddo ychwanegol a ganlyn:
direction
: Y cyfeiriad y mae'r carwsél yn llithro iddo (naill ai"left"
neu"right"
).relatedTarget
: Yr elfen DOM sy'n cael ei llithro i'w lle fel yr eitem weithredol.from
: Mynegai'r eitem gyfredolto
: Mynegai'r eitem nesaf
Mae pob digwyddiad carwsél yn cael ei danio at y carwsél ei hun (hy yn y <div class="carousel">
).
Math o Ddigwyddiad | Disgrifiad |
---|---|
sleid.bs.carwsél | Mae'r digwyddiad hwn yn tanio ar unwaith pan fydd y slide dull enghraifft yn cael ei ddefnyddio. |
sleid.bs.carousel | Mae'r digwyddiad hwn yn cael ei danio pan fydd y carwsél wedi cwblhau ei drawsnewidiad sleidiau. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Newid hyd y trawsnewid
Gellir newid hyd y trawsnewid .carousel-item
gyda'r $carousel-transition
newidyn Sass cyn llunio neu arddulliau arferol os ydych chi'n defnyddio'r CSS a luniwyd. Os cymhwysir trawsnewidiadau lluosog, gwnewch yn siŵr bod y trawsnewid trawsnewid yn cael ei ddiffinio yn gyntaf (ee. transition: transform 2s ease, opacity .5s ease-out
).