Bootstrap slideshow aneb kolotoč na webu

Jak to funguje

Kolotoč je prezentace prostřednictvím slideshow libovolného obsahu, vytvořeného pomocí 3D transformace CSS a JavaScriptu. Funguje s řadou obrázků, textu nebo vlastních značek. Zahrnuje také podporu navigačních prvků pro předchozí / další přechod mezi snímky a indikátory.

V prohlížečích, kde je podporováno Rozhraní API Viditelnost stránky, se kolotoč nebude moci posouvat, když uživatel nevidí webovou stránku (například když je karta prohlížeče neaktivní, okno prohlížeče je minimalizováno atd.).

Mějte na paměti, že vnořené kolotoče nejsou podporovány a kolotoče obecně nesplňují standardy přístupnosti.

Příklady

Kolotoče automaticky normalizují rozměry snímku. Z tohoto důvodu budete možná potřebovat další nástroje nebo vlastní styly, aby se obsah přiměřeně upravil. Kolotoče sice podporují předchozí / další ovládací prvky a indikátory, ale nejsou výslovně vyžadovány.

Třída .active je povinná alespoň u jednoho snímků, jinak kolotoč nebude viditelný. Nezapomeňte také nastavit jedinečné ID .carousel pro volitelné ovládací prvky, zejména pokud používáte na jedné stránce více kolotočů. Ovládací a indikační prvky musí mít data-target atribut (nebo href odkazy), který odpovídá id .carousel prvku.

Pouze snímky

Tady je kolotoč s přijíždějícími snímky. Všimněte si tříd v elementu obrázku .d-block a .w-100, které zabráňují výchozímu zarovnání obrázků v prohlížeči.

S ovládacími prvky

Jsou přidány šipky pro přechod mezi snímky a indikátory snímků.

S ukazateli

Můžete také přidat indikátory aktuálního snímku.

S titulky

Přidejte k snímkům titulky pomocí .carousel-caption prvku v libovolném .carousel-item. Lze je snadno skrýt na menších výřezech, jak je ukázáno níže. Skrýváme je zpočátku s .d-none a přinášíme je zpět na středně velká zařízení pomocí .d-md-block.

Crossfade

Přidejte .carousel-fade do svého kolotoče a animujte snímky s přechodem prolnutím.

Individuální .carousel-item interval

Přidáním data-interval="" a .carousel-item změníte dobu prodlevy mezi automatickým přepínáním na další položku.

Změna vlastností pomocí datových atributů

Pomocí datových atributů můžete snadno ovládat vlastnosti kolotoče. data-slide přijímá klíčová slova prev nebo next, která mění pozici snímku vzhledem k jeho aktuální poloze. Případně použijte data-slide-to k předání surového indexu přechodu kolotoče data-slide-to="2", který posune přechod na konkrétní index počínaje 0.

data-ride="carousel" Atribut se používá pro označení kolotoče jako začátku animace po načtení stránky. Pokud nepoužíváte data-ride="carousel" k inicializaci kolotoče, musíte jej inicializovat sami. Nelze jej použít v kombinaci s (redundantní a zbytečnou) explicitní inicializací JavaScriptu stejného kolotoče.

Zde jsou uvedeny možnosti, které lze předat prostřednictvím datových atributů nebo JavaScriptu. U datových atributů připojte název volby data-, jako v data-interval="".