Kolotoč
Komponenta prezentace pro procházení prvků – obrázků nebo snímků textu – jako je karusel.
Jak to funguje
Kolotoč je prezentace pro procházení série obsahu, vytvořená pomocí CSS 3D transformací a trochou JavaScriptu. Pracuje se sérií obrázků, textů nebo vlastních značek. Zahrnuje také podporu pro předchozí/následující ovládací prvky a indikátory.
V prohlížečích, kde je podporováno rozhraní API pro viditelnost stránky , se karusel zabrání klouzání, když webová stránka není pro uživatele viditelná (například když je karta prohlížeče neaktivní, okno prohlížeče je minimalizováno atd.).
prefers-reduced-motion
dotazu na média. Podívejte se na
část s omezeným pohybem v naší dokumentaci přístupnosti .
Mějte prosím na paměti, že vnořené karusely nejsou podporovány a karusely obecně nejsou v souladu se standardy přístupnosti.
A konečně, pokud vytváříte náš JavaScript ze zdroje, vyžadujeutil.js
.
Příklad
Karusely automaticky nenormalizují rozměry snímků. Z tohoto důvodu může být nutné použít další nástroje nebo vlastní styly, aby bylo možné vhodně upravit velikost obsahu. I když karusely podporují předchozí/následující ovládací prvky a indikátory, nejsou výslovně vyžadovány. Přidejte a přizpůsobte, jak uznáte za vhodné.
Třídu .active
je třeba přidat na jeden ze snímků, jinak nebude karusel viditelný. Nezapomeňte také nastavit jedinečné id
na .carousel
volitelných ovládacích prvcích, zvláště pokud používáte více karuselu na jedné stránce. Ovládací a indikační prvky musí mít data-target
atribut (nebo href
pro odkazy), který odpovídá id
prvku .carousel
.
Pouze diapozitivy
Zde je kolotoč pouze se skluzavkami. Všimněte si přítomnosti obrázků .d-block
a .w-100
na karuselu, abyste zabránili výchozímu zarovnání obrázků prohlížeče.
<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ádáním
Přidání předchozího a dalšího ovládacího prvku. Doporučujeme používat <button>
prvky, ale můžete použít i <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átory
Kromě ovládacích prvků můžete do karuselu přidat také 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 titulky
Přidejte titulky do snímků snadno pomocí .carousel-caption
prvku v libovolném .carousel-item
. Lze je snadno skrýt na menších výřezech, jak je znázorněno níže, pomocí volitelných zobrazovacích nástrojů . Nejprve je skryjeme pomocí .d-none
a na středně velkých zařízeních je vrátíme pomocí .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>
Prolínání
Přidejte .carousel-fade
do svého karuselu a animujte snímky s přechodem zeslabování namísto snímku. V závislosti na obsahu karuselu (např. snímky pouze s textem) možná budete chtít přidat .bg-body
nebo nějaké vlastní CSS do .carousel-item
s pro správné prolínání.
<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ální .carousel-item
interval
Přidejte data-interval=""
k a , chcete- .carousel-item
li změnit dobu prodlevy mezi automatickým cyklováním k další položce.
<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ázat přejíždění dotykem
Karusely podporují přejíždění prstem doleva/doprava na zařízeních s dotykovou obrazovkou pro pohyb mezi snímky. To lze zakázat pomocí data-touch
atributu. Níže uvedený příklad také nezahrnuje data-ride
atribut a má data-interval="false"
, takže se nepřehrává 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žívání
Prostřednictvím datových atributů
Pomocí atributů dat můžete snadno ovládat polohu karuselu. data-slide
přijímá klíčová slova prev
nebo next
, která mění pozici snímku vzhledem k jeho aktuální pozici. Případně použijte data-slide-to
k předání nezpracovaného indexu snímku do karuselu data-slide-to="2"
, který posune pozici snímku na konkrétní index začínající na 0
.
Atribut data-ride="carousel"
se používá k označení karuselu jako animovaného počínaje načtením stránky. Pokud karusel nepoužíváte data-ride="carousel"
k inicializaci, musíte jej inicializovat sami. Nelze jej použít v kombinaci s (nadbytečnou a nepotřebnou) explicitní inicializací JavaScriptu stejného karuselu.
Prostřednictvím JavaScriptu
Zavolejte karusel ručně pomocí:
$('.carousel').carousel()
Možnosti
Možnosti lze předávat prostřednictvím atributů dat nebo JavaScriptu. U atributů dat připojte název volby k data-
, jako v data-interval=""
.
název | Typ | Výchozí | Popis |
---|---|---|---|
časový úsek | číslo | 5000 | Doba prodlevy mezi automatickým cyklováním položky. Pokud false , karusel se nebude automaticky cyklovat. |
klávesnice | booleovský | skutečný | Zda má karusel reagovat na události klávesnice. |
pauza | řetězec | booleovský | 'vznášet se' | Je-li nastaveno na Pokud je na dotykových zařízeních nastaveno na |
jezdit | tětiva | Nepravdivé | Automaticky přehraje karusel poté, co uživatel ručně zacyklí první položku. Pokud je nastaveno na 'carousel' , automaticky se při načtení přehraje karusel. |
zabalit | booleovský | skutečný | Zda by se měl kolotoč nepřetržitě pohybovat nebo mít tvrdé zastávky. |
dotek | booleovský | skutečný | Zda má karusel podporovat interakce přejetí prstem doleva/doprava na zařízeních s dotykovou obrazovkou. |
Metody
Asynchronní metody a přechody
Všechny metody API jsou asynchronní a zahajují přechod . Vrátí se k volajícímu, jakmile je přechod zahájen, ale před jeho ukončením . Kromě toho bude ignorováno volání metody na přechodové komponentě .
Další informace naleznete v naší dokumentaci k JavaScriptu .
.carousel(options)
Inicializuje karusel s volitelnými možnostmi object
a začne procházet položky.
$('.carousel').carousel({
interval: 2000
})
.carousel('cycle')
Prochází položky karuselu zleva doprava.
.carousel('pause')
Zastaví kolotoč v procházení položek.
.carousel(number)
Cykluje karusel na konkrétní rámec (na základě 0, podobně jako pole). Vrátí se k volajícímu před zobrazením cílové položky (tj. před tím , než dojde k slid.bs.carousel
události).
.carousel('prev')
Přejde na předchozí položku. Vrátí se k volajícímu před zobrazením předchozí položky (tj. před tím , než dojde k slid.bs.carousel
události).
.carousel('next')
Přejde na další položku. Vrátí se k volajícímu dříve, než se zobrazí další položka (tj. než dojde k slid.bs.carousel
události).
.carousel('dispose')
Zničí kolotoč prvku.
.carousel('nextWhenVisible')
Nepřepínejte karusel na další, když není viditelná stránka nebo karusel nebo jeho nadřazený prvek. Vrátí se k volajícímu dříve, než se zobrazí další položka (tj. než dojde k slid.bs.carousel
události).
.carousel('to')
Cykluje karusel na konkrétní rámec (na základě 0, podobně jako pole). Vrátí se k volajícímu dříve, než se zobrazí další položka (tj. než dojde k slid.bs.carousel
události).
Události
Třída karuselu Bootstrap odhaluje dvě události pro připojení k funkci karuselu. Obě události mají následující další vlastnosti:
direction
: Směr, ve kterém se karusel posouvá (buď"left"
nebo"right"
).relatedTarget
: Prvek DOM, který se zasouvá na místo jako aktivní položka.from
: Index aktuální položkyto
: Index další položky
Všechny karuselové události jsou spouštěny na karuselu samotném (tj. na <div class="carousel">
).
Typ události | Popis |
---|---|
slide.bs.kolotoč | Tato událost se spustí okamžitě při slide vyvolání metody instance. |
posuvný.bs.kolotoč | Tato událost se spustí, když karusel dokončí svůj posuvný přechod. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Změnit dobu přechodu
Trvání přechodu .carousel-item
lze změnit pomocí $carousel-transition
proměnné Sass před kompilací nebo vlastních stylů, pokud používáte kompilovaný CSS. Pokud je použito více přechodů, ujistěte se, že přechod transformace je definován jako první (např. transition: transform 2s ease, opacity .5s ease-out
).