Vrtiljak
Komponenta diaprojekcije za kroženje med elementi – slikami ali diapozitivi besedila – kot vrtiljak.
Kako deluje
Vrtiljak je diaprojekcija za kolesarjenje skozi vrsto vsebine, zgrajena s 3D-transformacijami CSS in malo JavaScripta. Deluje z vrsto slik, besedilom ali oznakami po meri. Vključuje tudi podporo za prejšnje/naslednje kontrole in indikatorje.
V brskalnikih, kjer je podprt API za vidnost strani , se bo vrtiljak izognil drsenju, ko spletna stran uporabniku ni vidna (na primer, ko je zavihek brskalnika neaktiven, okno brskalnika pomanjšano itd.).
prefers-reduced-motion
medijske poizvedbe. Oglejte si razdelek o
zmanjšanem gibanju v naši dokumentaciji o dostopnosti .
Zavedajte se, da ugnezdeni vrtiljaki niso podprti in da vrtiljaki na splošno niso skladni s standardi dostopnosti.
Nazadnje, če gradite naš JavaScript iz izvorne kode, zahtevautil.js
.
Primer
Vrtiljaki ne normalizirajo samodejno dimenzij diapozitivov. Zato boste morda morali uporabiti dodatne pripomočke ali sloge po meri za ustrezno velikost vsebine. Čeprav vrtiljaki podpirajo prejšnje/naslednje kontrole in indikatorje, niso izrecno potrebni. Dodajte in prilagodite, kot se vam zdi primerno.
Razred .active
je treba dodati enemu od diapozitivov, sicer vrtiljak ne bo viden. Prepričajte se tudi, da nastavite edinstveno id
za .carousel
izbirne kontrolnike, še posebej, če uporabljate več vrtiljakov na eni strani. Kontrolni in indikatorski elementi morajo imeti data-target
atribut (ali href
za povezave), ki se ujema id
z .carousel
elementom.
Samo diapozitivi
Tukaj je vrtiljak samo z diapozitivi. Upoštevajte prisotnost slik .d-block
in .w-100
na vrtiljaku, da preprečite privzeto poravnavo slik brskalnika.
<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>
S krmilniki
Dodajanje prejšnjih in naslednjih kontrolnikov. Priporočamo uporabo <button>
elementov, vendar lahko uporabite tudi <a>
elemente z 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>
Z indikatorji
Indikatorje lahko dodate tudi na vrtiljak poleg kontrolnikov.
<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>
Z napisi
Svojim diapozitivom preprosto dodajte napise z .carousel-caption
elementom znotraj katerega koli .carousel-item
. Z izbirnimi prikazovalnimi pripomočki jih je mogoče enostavno skriti na manjših pogledih, kot je prikazano spodaj . Sprva jih skrijemo z .d-none
in jih na srednje velikih napravah vrnemo z .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
Dodajte .carousel-fade
na svoj vrtiljak, če želite animirati diapozitive z zbledelim prehodom namesto diapozitiva. Odvisno od vaše vsebine vrtiljaka (npr. diapozitivi samo z besedilom) boste morda želeli dodati .bg-body
CSS po meri .carousel-item
za ustrezno navzkrižno prelivanje.
<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>
Individualni .carousel-item
interval
Dodajte data-interval=""
v a .carousel-item
, da spremenite količino časa za zakasnitev med samodejnim preklapljanjem na naslednji element.
<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>
Onemogoči drsenje na dotik
Vrtiljaki podpirajo drsenje levo/desno na napravah z zaslonom na dotik za premikanje med diapozitivi. To lahko onemogočite z data-touch
atributom. Spodnji primer prav tako ne vključuje data-ride
atributa in ga vsebuje data-interval="false"
, zato se ne predvaja samodejno.
<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>
Uporaba
Preko podatkovnih atributov
Uporabite atribute podatkov za preprost nadzor položaja vrtiljaka. data-slide
sprejme ključne besede prev
ali next
, ki spremenijo položaj diapozitiva glede na trenutni položaj. Druga možnost je, da uporabite data-slide-to
za posredovanje neobdelanega indeksa diapozitiva na vrtiljak data-slide-to="2"
, ki premakne položaj diapozitiva na določen indeks, ki se začne z 0
.
Atribut data-ride="carousel"
se uporablja za označevanje vrtiljaka kot animiranega, ki se začne ob nalaganju strani. Če svojega vrtiljaka ne uporabljate data-ride="carousel"
za inicializacijo, ga morate inicializirati sami. Ni ga mogoče uporabiti v kombinaciji z (odvečno in nepotrebno) eksplicitno inicializacijo JavaScript istega vrtiljaka.
Prek JavaScripta
Ročno pokličite vrtiljak z:
$('.carousel').carousel()
Opcije
Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-
, kot v data-interval=""
.
Ime | Vrsta | Privzeto | Opis |
---|---|---|---|
interval | število | 5000 | Količina časa zakasnitve med samodejnim kroženjem elementa. Če false je , se vrtiljak ne bo samodejno vrtel. |
tipkovnico | logično | prav | Ali naj se vrtiljak odzove na dogodke na tipkovnici. |
pavza | niz | logično | 'lebdeti' | Če je nastavljeno na Ko je na napravah z omogočenim dotikom nastavljeno na |
vožnja | vrvica | lažno | Samodejno predvaja vrtiljak, potem ko uporabnik ročno preklopi prvi element. Če je nastavljeno na 'carousel' samodejno predvaja vrtiljak ob nalaganju. |
zaviti | logično | prav | Ali naj vrtiljak kroži neprekinjeno ali se mora močno ustaviti. |
dotik | logično | prav | Ali naj vrtiljak podpira interakcije s potegom levo/desno na napravah z zaslonom na dotik. |
Metode
Asinhrone metode in prehodi
Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .
Za več informacij si oglejte našo dokumentacijo JavaScript .
.carousel(options)
Inicializira vrtiljak z izbirnimi možnostmi object
in začne krožiti med elementi.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Kroži skozi elemente vrtiljaka od leve proti desni.
.carousel('pause')
Prepreči kroženje vrtiljaka med predmeti.
.carousel(number)
Preklopi vrtiljak na določen okvir (na osnovi 0, podobno matriki). Vrne se klicatelju, preden je prikazan ciljni element (tj. preden se slid.bs.carousel
zgodi dogodek).
.carousel('prev')
Preklopi na prejšnji element. Vrne se klicatelju, preden je prikazan prejšnji element (tj. preden slid.bs.carousel
pride do dogodka).
.carousel('next')
Preklopi na naslednji element. Vrne se k klicatelju, preden je prikazan naslednji element (tj. preden slid.bs.carousel
pride do dogodka).
.carousel('dispose')
Uniči vrtiljak elementa.
.carousel('nextWhenVisible')
Ne premikajte vrtiljaka na naslednjo, če stran ni vidna ali vrtiljak ali njegov nadrejeni element ni viden. Vrne se k klicatelju, preden je prikazan naslednji element (tj. preden slid.bs.carousel
pride do dogodka).
.carousel('to')
Preklopi vrtiljak na določen okvir (na osnovi 0, podobno matriki). Vrne se k klicatelju, preden je prikazan naslednji element (tj. preden slid.bs.carousel
pride do dogodka).
Dogodki
Bootstrapov razred vrtiljaka izpostavlja dva dogodka za priključitev na funkcijo vrtiljaka. Oba dogodka imata naslednje dodatne lastnosti:
direction
: Smer, v katero drsi vrtiljak ("left"
ali"right"
).relatedTarget
: Element DOM, ki je potisnjen na svoje mesto kot aktivni element.from
: Indeks trenutnega predmetato
: Indeks naslednjega elementa
Vsi dogodki vrtiljaka se sprožijo na samem vrtiljaku (tj. na <div class="carousel">
).
Vrsta dogodka | Opis |
---|---|
slide.bs.carousel | Ta dogodek se sproži takoj, ko slide je priklicana metoda primerka. |
slid.bs.carousel | Ta dogodek se sproži, ko vrtiljak zaključi prehod diapozitivov. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Spremenite trajanje prehoda
Trajanje prehoda .carousel-item
lahko spremenite s $carousel-transition
spremenljivko Sass pred prevajanjem ali slogi po meri, če uporabljate preveden CSS. Če je uporabljenih več prehodov, se prepričajte, da je najprej definiran prehod transformacije (npr. transition: transform 2s ease, opacity .5s ease-out
).