Karussell
Slaidiseansi komponent elementide (piltide või tekstislaidide) vahel liikumiseks nagu karussell.
Kuidas see töötab
Karussell on CSS-i 3D-teisenduste ja natukese JavaScripti abil üles ehitatud slaidiseanss, mis võimaldab liikuda läbi sisusarja. See töötab piltide, teksti või kohandatud märgistusega. See hõlmab ka eelmiste/järgmiste juhtelementide ja indikaatorite tuge.
Brauserites, kus lehe nähtavuse API on toetatud, väldib karussell libisemist, kui veebileht pole kasutajale nähtav (nt kui brauseri vahekaart on passiivne, brauseriaken on minimeeritud jne).
prefers-reduced-motion
meediumipäringust. Vaadake
meie juurdepääsetavuse dokumentatsiooni vähendatud liikumise jaotist .
Pange tähele, et pesastatud karusselle ei toetata ja karussellid ei järgi üldiselt juurdepääsetavuse standardeid.
Lõpuks, kui loote meie JavaScripti allikast, nõuabutil.js
see .
Näide
Karussellid ei normaliseeri automaatselt slaidi mõõtmeid. Seetõttu peate võib-olla kasutama täiendavaid utiliite või kohandatud stiile, et sisu sobivat suurust muuta. Kuigi karussellid toetavad eelmisi/järgmisi juhtelemente ja indikaatoreid, pole need otseselt nõutavad. Lisage ja kohandage oma äranägemise järgi.
Klass .active
tuleb lisada ühele slaidile, muidu karusselli ei paista. Samuti määrake valikuliste juhtelementide jaoks kindlasti kordumatu id
, .carousel
eriti kui kasutate ühel lehel mitut karusselli. Juht- ja indikaatorelementidel peab olema data-target
atribuut (või href
linkide puhul), mis kattub id
elemendi atribuudiga .carousel
.
Ainult slaidid
Siin on ainult slaididega karussell. Pange tähele, et karussellikujutistel on tähised .d-block
ja .w-100
, et vältida brauseri kujutiste vaikejoondamist.
<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>
Juhtseadmetega
Eelmise ja järgmise juhtelemendi lisamine. Soovitame kasutada <button>
elemente, kuid võite kasutada ka <a>
elemente koos 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>
Näitajatega
Lisaks juhtnuppudele saate karussellile lisada ka indikaatoreid.
<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>
Koos pealdistega
Lisage oma slaididele hõlpsasti pealdisi .carousel-caption
elemendiga mis tahes .carousel-item
. Neid saab valikuliste kuvautiliitidega hõlpsasti väiksematesse vaateavadesse peita, nagu allpool näidatud . Peidame need algselt rakendusega .d-none
ja toome need tagasi keskmise suurusega seadmetele .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
Lisage .carousel-fade
oma karusselli, et animeerida slaide slaidi asemel tuhmumise üleminekuga. Olenevalt teie karusselli sisust (nt ainult teksti slaidid) võiksite õigeks ristpimendamiseks lisada .bg-body
või mõne kohandatud CSS- i..carousel-item
<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>
Individuaalne .carousel-item
intervall
Lisage data-interval=""
a .carousel-item
-sse, et muuta aega, mis kulub automaatselt järgmise üksuseni liikumise vahel.
<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>
Keela puutega pühkimine
Karussellid toetavad puuteekraaniga seadmetes slaidide vahel liikumiseks vasakule/paremale libistamist. Selle saab data-touch
atribuudi abil keelata. Allolev näide ei sisalda samuti data-ride
atribuuti ja data-interval="false"
seda ei esitata automaatselt.
<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>
Kasutamine
Andmeatribuutide kaudu
Kasutage karusselli asukoha hõlpsaks juhtimiseks andmeatribuute. data-slide
aktsepteerib märksõnu prev
või next
, mis muudab slaidi asukohta selle praeguse asukoha suhtes. Teise võimalusena kasutage data-slide-to
töötlemata slaidiindeksi edastamiseks karussellile data-slide-to="2"
, mis nihutab slaidi positsiooni konkreetsele registrile, mis algab tähega 0
.
Atribuuti data-ride="carousel"
kasutatakse karusselli märgistamiseks animeerivaks alates lehe laadimisest. Kui te ei kasuta data-ride="carousel"
oma karusselli lähtestamiseks, peate selle ise lähtestama. Seda ei saa kasutada koos (liigse ja mittevajaliku) selgesõnalise JavaScripti lähtestamisega sama karusselli puhul.
JavaScripti kaudu
Helistage karusselli käsitsi, kasutades:
$('.carousel').carousel()
Valikud
Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-
, nagu data-interval=""
.
Nimi | Tüüp | Vaikimisi | Kirjeldus |
---|---|---|---|
intervall | number | 5000 | Aeg, mis kulub üksuse automaatse tsükli vahel. Kui false , ei käivitu karussell automaatselt. |
klaviatuur | tõeväärtus | tõsi | Kas karussell peaks reageerima klaviatuurisündmustele. |
paus | string | tõeväärtus | 'hõljuma' | Kui see on seatud Puutetundlike seadmete |
sõitma | string | vale | Esitab karusselli automaatselt pärast seda, kui kasutaja on esimese üksuse käsitsi tsüklistanud. Kui see on määratud 'carousel' , esitab karusselli laadimisel automaatselt. |
mähis | tõeväärtus | tõsi | Kas karussell peaks pidevalt tiirlema või peaks olema raskeid peatusi. |
puudutada | tõeväärtus | tõsi | Kas karussell peaks toetama puuteekraaniga seadmetes vasakule/paremale pühkimist. |
meetodid
Asünkroonsed meetodid ja üleminekud
Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .
Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .
.carousel(options)
Lähtestab karusselli valikuliste valikutega object
ja hakkab üksuste vahel ringi liikuma.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Liigub läbi karusselli üksuste vasakult paremale.
.carousel('pause')
Peatab karusselli esemete vahel liikumise.
.carousel(number)
Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga). Naaseb helistaja juurde enne sihtüksuse näitamist (st enne slid.bs.carousel
sündmuse toimumist).
.carousel('prev')
Liigub eelmise üksuse juurde. Naaseb helistaja juurde enne eelmise üksuse näitamist (st enne slid.bs.carousel
sündmuse toimumist).
.carousel('next')
Liigub järgmise üksuse juurde. Naaseb helistaja juurde enne järgmise üksuse näitamist (st enne slid.bs.carousel
sündmuse toimumist).
.carousel('dispose')
Hävitab elemendi karusselli.
.carousel('nextWhenVisible')
Ärge liigutage karusselli järgmisele, kui leht pole nähtav või karussell või selle ülem pole nähtav. Naaseb helistaja juurde enne järgmise üksuse näitamist (st enne slid.bs.carousel
sündmuse toimumist).
.carousel('to')
Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga). Naaseb helistaja juurde enne järgmise üksuse näitamist (st enne slid.bs.carousel
sündmuse toimumist).
Sündmused
Bootstrapi karusselliklass paljastab kaks sündmust karusselli funktsioonidega liitumiseks. Mõlemal sündmusel on järgmised lisaomadused:
direction
: suund, milles karussell libiseb (kas"left"
või"right"
).relatedTarget
: DOM-element, mis libistatakse aktiivse üksusena oma kohale.from
: praeguse üksuse indeksto
: järgmise üksuse register
Kõik karussellisündmused käivitatakse karusselli enda (st <div class="carousel">
) suunas.
Sündmuse tüüp | Kirjeldus |
---|---|
slide.bs.carousell | See sündmus käivitub kohe, kui slide eksemplari meetod käivitatakse. |
liug.bs.karussell | See sündmus käivitatakse, kui karussell on slaidi ülemineku lõpetanud. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Muutke ülemineku kestust
Ülemineku kestust .carousel-item
saab muuta $carousel-transition
Sassi muutujaga enne kompileerimist või kohandatud stiilidega, kui kasutate kompileeritud CSS-i. Kui rakendatakse mitut üleminekut, veenduge, et teisendusüleminek oleks kõigepealt määratletud (nt transition: transform 2s ease, opacity .5s ease-out
).