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.
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-bs-target
priodoledd (neu href
ar gyfer dolenni) sy'n cyfateb i nodwedd id
yr .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-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>
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-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>
Gyda dangosyddion
Gallwch hefyd ychwanegu'r dangosyddion at y carwsél, ochr yn ochr â'r rheolyddion, hefyd.
<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>
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-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>
Croesfade
Ychwanegwch .carousel-fade
at eich carwsél i animeiddio sleidiau gyda thrawsnewidiad pylu yn lle sleid.
<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
Cyfwng unigol
Ychwanegu data-bs-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-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>
Analluogi swiping cyffwrdd
Mae carwsél yn cefnogi troi i'r chwith / dde ar ddyfeisiau sgrin gyffwrdd i symud rhwng sleidiau. Gellir analluogi hyn gan ddefnyddio'r data-bs-touch
briodwedd. Nid yw'r enghraifft isod ychwaith yn cynnwys y data-bs-ride
priodoledd ac data-bs-interval="false"
felly nid yw'n chwarae'n awtomatig.
<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>
Amrywiad tywyll
Ychwanegu .carousel-dark
at y .carousel
rheolyddion, dangosyddion a chapsiynau tywyllach. Mae rheolyddion wedi'u gwrthdroi o'u llenwad gwyn diofyn gyda'r filter
eiddo CSS. Mae gan gapsiynau a rheolaethau newidynnau Sass ychwanegol sy'n addasu'r color
a 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>
Trawsnewid personol
Gellir newid hyd y trawsnewid .carousel-item
gyda'r $carousel-transition-duration
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
).
Sass
Newidynnau
$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);
Defnydd
Trwy briodoleddau data
Defnyddio priodoleddau data i reoli lleoliad y carwsél yn hawdd. data-bs-slide
yn derbyn yr allweddeiriau prev
neu next
, sy'n newid safle'r sleidiau o'i gymharu â'i safle presennol. Fel arall, defnyddiwch data-bs-slide-to
i basio mynegai sleidiau crai i'r carwsél data-bs-slide-to="2"
, sy'n symud lleoliad y sleidiau i fynegai penodol gan ddechrau gyda 0
.
Defnyddir y data-bs-ride="carousel"
briodwedd i nodi carwsél fel animeiddiad sy'n dechrau ar lwyth tudalen. Os nad ydych chi'n defnyddio data-bs-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:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Opsiynau
Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-
, fel yn data-bs-interval=""
.
Enw | Math | Diofyn | Disgrifiad |
---|---|---|---|
interval |
rhif | 5000 |
Faint o amser i oedi rhwng beicio eitem yn awtomatig. Os false , ni fydd carwsél yn beicio'n awtomatig. |
keyboard |
boolaidd | true |
A ddylai'r carwsél ymateb i ddigwyddiadau bysellfwrdd. |
pause |
llinyn | boolaidd | 'hover' |
Os caiff ei osod Ar ddyfeisiadau cyffyrddiad, pan gaiff ei osod i |
ride |
llinyn | boolaidd | false |
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. |
wrap |
boolaidd | true |
A ddylai'r carwsél feicio'n barhaus neu gael stopiau caled. |
touch |
boolaidd | true |
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 .
Gallwch greu enghraifft carwsél gyda'r lluniwr carwsél, er enghraifft, i gychwyn gydag opsiynau ychwanegol a dechrau beicio trwy eitemau:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Dull | Disgrifiad |
---|---|
cycle |
Beicio drwy'r eitemau carwsél o'r chwith i'r dde. |
pause |
Yn atal y carwsél rhag beicio trwy eitemau. |
prev |
Cylchoedd i'r eitem flaenorol. Yn dychwelyd i'r galwr cyn i'r eitem flaenorol gael ei dangos (ee, cyn i'r slid.bs.carousel digwyddiad ddigwydd). |
next |
Beiciau i'r eitem nesaf. Yn dychwelyd i'r galwr cyn i'r eitem nesaf gael ei dangos (ee, cyn i'r slid.bs.carousel digwyddiad ddigwydd). |
nextWhenVisible |
Peidiwch â beicio carwsél i 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 darged gael ei dangos |
to |
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 (ee, cyn i'r slid.bs.carousel digwyddiad ddigwydd). |
dispose |
Yn dinistrio carwsél elfen. (Yn dileu data sydd wedi'i storio ar yr elfen DOM) |
getInstance |
Dull statig sy'n eich galluogi i gael yr enghraifft carwsél yn gysylltiedig ag elfen DOM, gallwch ei ddefnyddio fel hyn:bootstrap.Carousel.getInstance(element) |
getOrCreateInstance |
Dull statig sy'n dychwelyd enghraifft carwsél sy'n gysylltiedig ag elfen DOM neu greu un newydd rhag ofn na chafodd ei gychwyn. Gallwch ei ddefnyddio fel hyn:bootstrap.Carousel.getOrCreateInstance(element) |
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 |
---|---|
slide.bs.carousel |
Yn tanio ar unwaith pan fydd y slide dull enghraifft yn cael ei ddefnyddio. |
slid.bs.carousel |
Wedi'i danio pan fydd y carwsél wedi cwblhau ei drawsnewidiad sleidiau. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})