Carousel
In slideshow-komponint foar it fytsen troch eleminten - ôfbyldings of dia's fan tekst - lykas in karrousel.
Hoe't it wurket
De karrousel is in diashow foar it fytsen troch in searje ynhâld, boud mei CSS 3D-transformaasjes en in bytsje JavaScript. It wurket mei in searje ôfbyldings, tekst, as oanpaste markup. It omfettet ek stipe foar foarige / folgjende kontrôles en yndikatoaren.
Yn browsers dêr't de Page Visibility API wurdt stipe, sil de karrousel it glydzjen foarkomme as de webside net sichtber is foar de brûker (lykas as de blêderljepper ynaktyf is, it browserfinster wurdt minimalisearre, ensfh.).
prefers-reduced-motion
mediafraach. Sjoch de
seksje mei fermindere beweging fan ús dokumintaasje foar tagonklikens .
Wês asjebleaft bewust dat nestele karrousels net wurde stipe, en karrousels binne oer it algemien net foldogge oan tagonklikensnoarmen.
As lêste, as jo ús JavaScript fan boarne bouwe, fereasketutil.js
it .
Foarbyld
Carousels normalisearje diadimensjes net automatysk. As sadanich moatte jo miskien ekstra nutsbedriuwen of oanpaste stilen brûke om ynhâld op passende grutte te meitsjen. Wylst karrousels foarige / folgjende kontrôles en yndikatoaren stypje, binne se net eksplisyt ferplicht. Foegje en oanpasse as jo goed fine.
De .active
klasse moat tafoege wurde oan ien fan de dia's oars is de karrousel net sichtber. Soargje der ek foar dat jo in unyk ynstelle id
op 'e .carousel
foar opsjonele kontrôles, foaral as jo meardere karrousels op ien side brûke. Kontrôle- en yndikatoreleminten moatte in data-target
attribút hawwe (as href
foar keppelings) dy't oerienkomt mei de id
fan it .carousel
elemint.
Allinnich slides
Hjir is in karrousel mei allinich dia's. Notysje de oanwêzigens fan 'e .d-block
en .w-100
op carouselôfbyldings om blêder standertôfbyldingsôfstimming te foarkommen.
<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>
Mei kontrôles
It tafoegjen fan de foarige en folgjende kontrôles. Wy riede oan om <button>
eleminten te brûken, mar jo kinne ek <a>
eleminten brûke mei 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>
Mei yndikatoaren
Jo kinne ek de yndikatoaren tafoegje oan 'e karrousel, neist de kontrôles, ek.
<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>
Mei ûnderskriften
Foegje maklik titels ta oan jo dia's mei it .carousel-caption
elemint yn elke .carousel-item
. Se kinne maklik wurde ferburgen op lytsere viewports, lykas hjirûnder werjûn, mei opsjonele display-hulpprogramma's . Wy ferbergje se yn earste ynstânsje mei .d-none
en bringe se werom op middelgrutte apparaten mei .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
Foegje .carousel-fade
oan jo karrousel ta om dia's te animearjen mei in fade-oergong ynstee fan in dia. Ofhinklik fan jo karrouselynhâld (bygelyks dia's allinich foar tekst), kinne jo .bg-body
in oanpaste CSS tafoegje oan 'e .carousel-item
s foar goede crossfading.
<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>
Yndividueel .carousel-item
ynterval
Taheakje data-interval=""
oan in .carousel-item
om de tiid te feroarjen om te fertrage tusken automatysk fytsen nei it folgjende item.
<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>
Skeakelje touch swiping út
Carousels stypje swipe lofts / rjochts op touchscreen-apparaten om te ferpleatsen tusken dia's. Dit kin útskeakele wurde mei it data-touch
attribút. It foarbyld hjirûnder omfettet ek it data-ride
attribút net en hat data-interval="false"
dus net autoplay.
<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>
Gebrûk
Fia data attributen
Brûk gegevensattributen om de posysje fan 'e karrousel maklik te kontrolearjen. data-slide
akseptearret de kaaiwurden prev
of next
, dy't de slideposysje feroaret relatyf oan syn hjoeddeistige posysje. As alternatyf, brûk data-slide-to
om in rûge slide-yndeks troch te jaan oan de karrousel data-slide-to="2"
, dy't de slideposysje ferpleatst nei in bepaalde yndeks dy't begjint mei 0
.
It data-ride="carousel"
attribút wurdt brûkt om in karrousel te markearjen as animaasje te begjinnen by it laden fan siden. As jo net brûke data-ride="carousel"
om jo karrousel te inisjalisearjen, moatte jo it sels inisjalisearje. It kin net brûkt wurde yn kombinaasje mei (oerstallige en net nedich) eksplisite JavaSkript inisjalisaasje fan deselde carousel.
Fia JavaScript
Rop karrousel manuell mei:
$('.carousel').carousel()
Opsjes
Opsjes kinne wurde trochjûn fia gegevensattributen of JavaScript. Foar gegevensattributen foegje de opsjenamme ta oan data-
, lykas yn data-interval=""
.
Namme | Type | Standert | Beskriuwing |
---|---|---|---|
tuskenskoft | nûmer | 5000 | De hoemannichte tiid om te fertrage tusken it automatysk fytsen fan in item. As false , sil karrousel net automatysk fytse. |
toetseboerd | boolean | wier | Oft de karrousel moat reagearje op toetseboerdeveneminten. |
skoft | string | boolean | 'sweve' | As ynsteld op Op touch-ynskeakele apparaten, as ynsteld op |
rit | string | falsk | Speelt de karrousel automatysk nei't de brûker it earste item mei de hân fytst. As ynsteld op 'carousel' , spilet de karrousel automatysk by laden. |
wrap | boolean | wier | Oft de karrousel kontinu fytse moat of hurde stops hawwe. |
oanreitsje | boolean | wier | Oft de karrousel links/rjochts swipe-ynteraksjes op touchscreen-apparaten moat stypje. |
Metoaden
Asynchrone metoaden en transysjes
Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .
.carousel(options)
Inisjalisearret de karrousel mei in opsjonele opsjes object
en begjint te fytsen troch items.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Cycles troch de karrousel items fan links nei rjochts.
.carousel('pause')
Stopt de karrousel fan it fytsen troch items.
.carousel(number)
Sylt de karrousel nei in bepaald frame (0 basearre, fergelykber mei in array). Keart werom nei de beller foardat it doelitem is werjûn (dus foardat it slid.bs.carousel
evenemint bart).
.carousel('prev')
Cycles nei it foarige item. Keart werom nei de beller foardat it foarige item is toand (dus foardat it slid.bs.carousel
barren plakfynt).
.carousel('next')
Cycles nei it folgjende item. Keart werom nei de beller foardat it folgjende item is toand (dus foardat it slid.bs.carousel
barren plakfynt).
.carousel('dispose')
Ferneatiget de karrousel fan in elemint.
.carousel('nextWhenVisible')
Fier de karrousel net nei de folgjende as de side net sichtber is of de karrousel of syn âlder net sichtber is. Keart werom nei de beller foardat it folgjende item is toand (dus foardat it slid.bs.carousel
barren plakfynt).
.carousel('to')
Sylt de karrousel nei in bepaald frame (0 basearre, fergelykber mei in array). Keart werom nei de beller foardat it folgjende item is toand (dus foardat it slid.bs.carousel
barren plakfynt).
Eveneminten
De karrouselklasse fan Bootstrap bleatstelt twa eveneminten foar heakjen oan karrouselfunksjonaliteit. Beide eveneminten hawwe de folgjende ekstra eigenskippen:
direction
: De rjochting wêryn't de karrousel glydt (of"left"
of"right"
).relatedTarget
: It DOM-elemint dat op syn plak wurdt glide as it aktive item.from
: De yndeks fan it aktuele itemto
: De yndeks fan it folgjende item
Alle karrouseleveneminten wurde op de karrousel sels ûntslein (dus by de <div class="carousel">
).
Event Type | Beskriuwing |
---|---|
slide.bs.carousel | Dit evenemint ûntspringt fuortendaliks as de slide eksimplaarmetoade wurdt oproppen. |
slid.bs.carrousel | Dit evenemint wurdt ûntslein as de karrousel syn slide-oergong foltôge hat. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Feroarje oergong doer
De oergongsdoer fan .carousel-item
kin feroare wurde mei de $carousel-transition
Sass-fariabele foardat jo kompilearje of oanpaste stilen as jo de kompilearre CSS brûke. As meardere transysjes wurde tapast, soargje derfoar dat de transformaasje-oergong earst definiearre is (bgl. transition: transform 2s ease, opacity .5s ease-out
).