Kolotoč
Komponent prezentácie na prepínanie medzi prvkami – obrázkami alebo snímkami textu – ako je kolotoč.
Ako to funguje
Kolotoč je prezentácia na cyklické prechádzanie sériou obsahu, vytvorená pomocou transformácií CSS 3D a trocha JavaScriptu. Pracuje so sériou obrázkov, textom alebo vlastným označením. Zahŕňa tiež podporu pre predchádzajúce/nasledujúce ovládacie prvky a indikátory.
V prehliadačoch, kde je podporované rozhranie Page Visibility API , sa karusel vyhne posúvaniu, keď webová stránka nie je pre používateľa viditeľná (napríklad keď je karta prehliadača neaktívna, okno prehliadača je minimalizované atď.).
prefers-reduced-motion
mediálneho dopytu. Pozrite si
časť so zníženým pohybom v našej dokumentácii o prístupnosti .
Upozorňujeme, že vnorené karusely nie sú podporované a karusely vo všeobecnosti nie sú v súlade so štandardmi dostupnosti.
Nakoniec, ak vytvárate náš JavaScript zo zdroja, vyžadujeutil.js
to .
Príklad
Karusely automaticky nenormalizujú rozmery snímky. Na prispôsobenie veľkosti obsahu preto možno budete musieť použiť ďalšie pomôcky alebo vlastné štýly. Hoci karusely podporujú predchádzajúce/nasledujúce ovládacie prvky a indikátory, nie sú výslovne potrebné. Pridajte a prispôsobte, ako uznáte za vhodné.
Triedu .active
je potrebné pridať na jednu zo snímok, inak nebude kolotoč viditeľný. Nezabudnite tiež nastaviť jedinečné id
na .carousel
voliteľné ovládacie prvky, najmä ak používate viacero karuselov na jednej stránke. Prvky ovládacích prvkov a indikátorov musia mať data-target
atribút (alebo href
pre odkazy), ktorý sa zhoduje id
s daným .carousel
prvkom.
Iba diapozitívy
Tu je kolotoč iba so sklíčkami. Všimnite si prítomnosť obrázkov .d-block
a .w-100
na karuseli, aby ste zabránili predvolenému zarovnaniu obrázkov prehliadača.
<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 ovládaním
Pridanie predchádzajúcich a nasledujúcich ovládacích prvkov. Odporúčame použiť <button>
prvky, ale môžete použiť aj <a>
prvky s 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>
S indikátormi
Okrem ovládacích prvkov môžete do kolotoča pridať aj indikátory.
<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>
S titulkami
Pridajte titulky na svoje snímky jednoducho pomocou .carousel-caption
prvku v ľubovoľnom súbore .carousel-item
. Môžu byť ľahko skryté v menších výrezoch, ako je znázornené nižšie, pomocou voliteľných nástrojov zobrazenia . Najprv ich skryjeme pomocou .d-none
a vrátime ich späť na stredne veľké zariadenia pomocou .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>
Prelínanie
Pridajte .carousel-fade
do svojho kolotoča a animujte snímky s prechodom miznutia namiesto snímky. V závislosti od obsahu karuselu (napr. len textové snímky) možno budete chcieť pridať .bg-body
alebo nejaké vlastné CSS do .carousel-item
s pre správne prelínanie.
<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>
Individuálny .carousel-item
interval
Pridajte data-interval=""
k a , ak .carousel-item
chcete zmeniť čas oneskorenia medzi automatickým cyklovaním na ďalšiu položku.
<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>
Zakázať posúvanie dotykom
Karusely podporujú potiahnutie prstom doľava/doprava na zariadeniach s dotykovou obrazovkou na pohyb medzi snímkami. Toto je možné deaktivovať pomocou data-touch
atribútu. Nižšie uvedený príklad tiež nezahŕňa data-ride
atribút, a data-interval="false"
preto sa neprehráva automaticky.
<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>
Použitie
Cez dátové atribúty
Pomocou atribútov údajov môžete jednoducho ovládať polohu karuselu. data-slide
akceptuje kľúčové slová prev
alebo next
, ktoré zmenia pozíciu snímky vzhľadom na jej aktuálnu pozíciu. Prípadne použite data-slide-to
na odovzdanie nespracovaného indexu snímky do karuselu data-slide-to="2"
, ktorý posunie pozíciu snímky na konkrétny index začínajúci na 0
.
Atribút data-ride="carousel"
sa používa na označenie karuselu ako animovaného pri načítaní stránky. Ak karusel nepoužívate data-ride="carousel"
na inicializáciu, musíte ho inicializovať sami. Nemožno ho použiť v kombinácii s (nadbytočnou a nepotrebnou) explicitnou inicializáciou JavaScriptu toho istého karuselu.
Cez JavaScript
Zavolajte karusel manuálne pomocou:
$('.carousel').carousel()
možnosti
Možnosti môžu byť odovzdané prostredníctvom dátových atribútov alebo JavaScriptu. Pre atribúty údajov pripojte názov voľby k data-
, ako v data-interval=""
.
názov | Typ | Predvolené | Popis |
---|---|---|---|
interval | číslo | 5000 | Čas oneskorenia medzi automatickým cyklovaním položky. Ak false , karusel sa nebude automaticky cyklovať. |
klávesnica | boolovská hodnota | pravda | Či má kolotoč reagovať na udalosti klávesnice. |
pauza | reťazec | boolovská hodnota | 'vznášať sa' | Ak je nastavené na Ak je na zariadeniach s dotykovým ovládaním nastavená možnosť |
jazdiť | reťazec | falošný | Automaticky prehrá karusel po tom, čo používateľ manuálne zacyklí prvú položku. Ak je nastavené na 'carousel' , automaticky sa spustí kolotoč pri načítaní. |
zabaliť | boolovská hodnota | pravda | Či má kolotoč nepretržite cyklovať alebo má mať tvrdé zastávky. |
dotyk | boolovská hodnota | pravda | Či má karusel podporovať interakcie potiahnutím prstom doľava/doprava na zariadeniach s dotykovou obrazovkou. |
Metódy
Asynchrónne metódy a prechody
Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .
.carousel(options)
Inicializuje kolotoč s voliteľnými možnosťami object
a začne cyklicky prechádzať položkami.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Prechádza položkami kolotoča zľava doprava.
.carousel('pause')
Zastaví kolotoč prechádzať položkami.
.carousel(number)
Cyklizuje karusel na konkrétny rámec (na základe 0, podobne ako pole). Vráti sa k volajúcemu pred zobrazením cieľovej položky (tj pred výskytom slid.bs.carousel
udalosti).
.carousel('prev')
Prejde na predchádzajúcu položku. Vráti sa k volajúcemu pred zobrazením predchádzajúcej položky (tj pred výskytom slid.bs.carousel
udalosti).
.carousel('next')
Prejde na ďalšiu položku. Vráti sa k volajúcemu pred zobrazením ďalšej položky (tj pred výskytom slid.bs.carousel
udalosti).
.carousel('dispose')
Zničí kolotoč prvku.
.carousel('nextWhenVisible')
Nepresúvajte otočný pás na ďalšiu, keď nie je viditeľná stránka alebo otočný pás alebo jeho nadradený prvok. Vráti sa k volajúcemu pred zobrazením ďalšej položky (tj pred výskytom slid.bs.carousel
udalosti).
.carousel('to')
Cyklizuje karusel na konkrétny rámec (na základe 0, podobne ako pole). Vráti sa k volajúcemu pred zobrazením ďalšej položky (tj pred výskytom slid.bs.carousel
udalosti).
Diania
Trieda karuselu Bootstrap odhaľuje dve udalosti na pripojenie k funkcii karuselu. Obe udalosti majú nasledujúce ďalšie vlastnosti:
direction
: Smer, v ktorom sa kolotoč posúva (buď"left"
alebo"right"
).relatedTarget
: Prvok DOM, ktorý sa posúva na miesto ako aktívna položka.from
: Index aktuálnej položkyto
: Index ďalšej položky
Všetky udalosti karuselu sa spúšťajú na samotnom kolotoči (tj na <div class="carousel">
).
Typ udalosti | Popis |
---|---|
slide.bs.kolotoč | Táto udalosť sa spustí okamžite pri slide vyvolaní metódy inštancie. |
posuvný.bs.kolotoč | Táto udalosť sa spustí, keď karusel dokončí svoj posuvný prechod. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Zmeňte trvanie prechodu
Trvanie prechodu .carousel-item
je možné zmeniť pomocou $carousel-transition
premennej Sass pred kompiláciou alebo pomocou vlastných štýlov, ak používate kompilovaný CSS. Ak sa použije viacero prechodov, uistite sa, že prechod transformácie je definovaný ako prvý (napr. transition: transform 2s ease, opacity .5s ease-out
).