Karrousel
'n Skyfievertoning-komponent vir fietsry deur elemente - prente of skyfies van teks - soos 'n karrousel.
Hoe dit werk
Die karrousel is 'n skyfievertoning vir fietsry deur 'n reeks inhoud, gebou met CSS 3D-transformasies en 'n bietjie JavaScript. Dit werk met 'n reeks beelde, teks of persoonlike opmaak. Dit sluit ook ondersteuning vir vorige/volgende kontroles en aanwysers in.
In blaaiers waar die bladsysigbaarheid-API ondersteun word, sal die karrousel gly vermy wanneer die webblad nie vir die gebruiker sigbaar is nie (soos wanneer die blaaieroortjie onaktief is, die blaaiervenster geminimaliseer word, ens.).
prefers-reduced-motion
medianavraag. Sien die
verminderde beweging-afdeling van ons toeganklikheidsdokumentasie .
Neem asseblief kennis dat geneste karrousels nie gesteun word nie, en karrousels voldoen oor die algemeen nie aan toeganklikheidstandaarde nie.
Laastens, as jy ons JavaScript vanaf die bron bou, vereisutil.js
dit .
Voorbeeld
Karrousels normaliseer nie outomaties skyfie-afmetings nie. As sodanig moet jy dalk bykomende nutsprogramme of pasgemaakte style gebruik om die inhoud op die regte grootte te kry. Terwyl karrousels vorige/volgende kontroles en aanwysers ondersteun, word dit nie uitdruklik vereis nie. Voeg by en pasmaak soos jy goeddink.
Die .active
klas moet by een van die skyfies gevoeg word anders sal die karrousel nie sigbaar wees nie. Maak ook seker dat jy 'n unieke id
op die .carousel
vir opsionele kontroles stel, veral as jy verskeie karrousels op 'n enkele bladsy gebruik. Beheer- en aanwyserelemente moet 'n data-target
kenmerk hê (of href
vir skakels) wat ooreenstem met die id
van die .carousel
element.
Slegs skyfies
Hier is 'n karrousel met slegs skyfies. Let op die teenwoordigheid van die .d-block
en .w-100
op karrouselbeelde om blaaier verstekbeeldbelyning te voorkom.
<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>
Met kontroles
Voeg die vorige en volgende kontroles by. Ons beveel aan om <button>
elemente te gebruik, maar jy kan ook <a>
elemente met 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>
Met aanwysers
Jy kan ook die aanwysers by die karrousel voeg, langs die kontroles ook.
<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>
Met byskrifte
Voeg byskrifte maklik by jou skyfies met die .carousel-caption
element binne enige .carousel-item
. Hulle kan maklik op kleiner viewports versteek word, soos hieronder getoon, met opsionele vertoonhulpmiddels . Ons steek hulle aanvanklik weg met .d-none
en bring hulle terug op mediumgrootte toestelle met .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>
Crossfade
Voeg .carousel-fade
by jou karrousel om skyfies te animeer met 'n vervaag-oorgang in plaas van 'n skyfie. Afhangende van jou karrouselinhoud (bv. slegs teksskyfies), wil jy dalk ' .bg-body
n pasgemaakte CSS by die .carousel-item
s voeg vir behoorlike kruisvervaag.
<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>
Individuele .carousel-item
interval
Voeg data-interval=""
by 'n .carousel-item
om die hoeveelheid tyd om te vertraag tussen outomatiese fietsry na die volgende item te verander.
<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>
Deaktiveer raakswiep
Karrousels ondersteun swiep links/regs op raakskermtoestelle om tussen skyfies te beweeg. Dit kan gedeaktiveer word met die data-touch
kenmerk. Die voorbeeld hieronder sluit ook nie die data-ride
kenmerk in nie en het data-interval="false"
dus nie outomaties speel nie.
<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>
Gebruik
Via data-eienskappe
Gebruik data-kenmerke om die posisie van die karrousel maklik te beheer. data-slide
aanvaar die sleutelwoorde prev
of next
, wat die skuifposisie relatief tot sy huidige posisie verander. Alternatiewelik, gebruik data-slide-to
om 'n rou skyfie-indeks na die karrousel deur te data-slide-to="2"
gee, wat die skyfieposisie verskuif na 'n spesifieke indeks wat begin met 0
.
Die data-ride="carousel"
kenmerk word gebruik om 'n karrousel as animasie te merk vanaf bladsy laai. As jy dit nie gebruik data-ride="carousel"
om jou karrousel te inisialiseer nie, moet jy dit self inisialiseer. Dit kan nie in kombinasie met (oortollige en onnodige) eksplisiete JavaScript-inisialisering van dieselfde karrousel gebruik word nie.
Via JavaScript
Bel karrousel handmatig met:
$('.carousel').carousel()
Opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-
, soos in data-interval=""
.
Naam | Tik | Verstek | Beskrywing |
---|---|---|---|
interval | nommer | 5000 | Die tyd om te vertraag tussen die outomatiese fietsry van 'n item. As false , sal die karrousel nie outomaties loop nie. |
sleutelbord | boolean | waar | Of die karrousel op sleutelbordgebeure moet reageer. |
pouse | tou | boolean | 'sweef' | As dit op gestel is Op aanraking-geaktiveerde toestelle, wanneer dit op gestel is |
ry | string | onwaar | Speel die karrousel outomaties nadat die gebruiker die eerste item met die hand gebruik het. As dit op gestel is 'carousel' , speel die karrousel outomaties wanneer dit gelaai word. |
toevou | boolean | waar | Of die karrousel aanhoudend moet fietsry of harde stops moet hê. |
raak | boolean | waar | Of die karrousel links/regs-swiep-interaksies op raakskermtoestelle moet ondersteun. |
Metodes
Asinchroniese metodes en oorgange
Alle API-metodes is asynchronies en begin 'n oorgang . Hulle keer terug na die oproeper sodra die oorgang begin is, maar voordat dit eindig . Daarbenewens sal 'n metode-oproep op 'n oorgangskomponent geïgnoreer word .
.carousel(options)
Inisialiseer die karrousel met 'n opsionele opsies object
en begin deur items ry.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Blaai deur die karrousel-items van links na regs.
.carousel('pause')
Stop die karrousel om deur items te fiets.
.carousel(number)
Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking). Keer terug na die oproeper voordat die teikenitem gewys is (dws voor die slid.bs.carousel
gebeurtenis plaasvind).
.carousel('prev')
Blaai na die vorige item. Keer terug na die oproeper voordat die vorige item gewys is (dws voor die slid.bs.carousel
gebeurtenis plaasvind).
.carousel('next')
Blaai na die volgende item. Keer terug na die oproeper voordat die volgende item gewys is (dws voor die slid.bs.carousel
gebeurtenis plaasvind).
.carousel('dispose')
Vernietig 'n element se karrousel.
.carousel('nextWhenVisible')
Moenie die karrousel na die volgende beweeg wanneer die bladsy nie sigbaar is nie of die karrousel of sy ouer nie sigbaar is nie. Keer terug na die oproeper voordat die volgende item gewys is (dws voor die slid.bs.carousel
gebeurtenis plaasvind).
.carousel('to')
Sit die karrousel na 'n spesifieke raam (0 gebaseer, soortgelyk aan 'n skikking). Keer terug na die oproeper voordat die volgende item gewys is (dws voor die slid.bs.carousel
gebeurtenis plaasvind).
Gebeurtenisse
Bootstrap se karrouselklas stel twee gebeurtenisse bloot vir inhaak by karrouselfunksionaliteit. Albei geleenthede het die volgende bykomende eienskappe:
direction
: Die rigting waarin die karrousel gly (óf"left"
óf"right"
).relatedTarget
: Die DOM-element wat in plek geskuif word as die aktiewe item.from
: Die indeks van die huidige itemto
: Die indeks van die volgende item
Alle karrouselgebeurtenisse word op die karrousel self afgevuur (dws by die <div class="carousel">
).
Soort gebeurtenis | Beskrywing |
---|---|
slide.bs.karrousel | Hierdie gebeurtenis brand onmiddellik wanneer die slide instansiemetode aangeroep word. |
gly.bs.karrousel | Hierdie gebeurtenis word afgevuur wanneer die karrousel sy skyfie-oorgang voltooi het. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Verander oorgangsduur
Die oorgangsduur van .carousel-item
kan verander word met die $carousel-transition
Sass-veranderlike voor samestelling of pasgemaakte style as jy die saamgestelde CSS gebruik. As veelvuldige oorgange toegepas word, maak seker dat die transformasie-oorgang eers gedefinieer word (bv. transition: transform 2s ease, opacity .5s ease-out
).