Source

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.).

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é.

Nezapomeňte nastavit jedinečné ID .carouselpro volitelné ovládací prvky, zejména pokud používáte více karuselu na jedné stránce.

Pouze diapozitivy

Zde je kolotoč pouze se skluzavkami. Všimněte si přítomnosti obrázků .d-blocka .img-fluidna 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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

S ovládáním

Přidání předchozích a následujících ovládacích prvků:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
Je vyžadován počáteční aktivní prvek

Třídu .activeje třeba přidat na jeden ze snímků. V opačném případě nebude karusel vidět.

S titulky

Přidejte titulky do snímků snadno pomocí .carousel-captionprvku 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-nonea na středně velkých zařízeních je vrátíme pomocí .d-md-block.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

Používání

Prostřednictvím datových atributů

Pomocí atributů dat můžete snadno ovládat polohu karuselu. data-slidepřijímá klíčová slova prevnebo next, která mění pozici snímku vzhledem k jeho aktuální pozici. Případně použijte data-slide-tok 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. 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 je hodnota false, karusel se automaticky nezacyklí.
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 "hover", pozastaví cyklování karuselu mouseentera obnoví cyklování karuselu mouseleave. Pokud je nastaveno na false, umístění kurzoru nad karusel jej nezastaví.

Pokud je na dotykových zařízeních nastaveno na "hover", cyklování se na touchenddva intervaly pozastaví (jakmile uživatel dokončí interakci s karuselem), než se automaticky obnoví. Všimněte si, že se jedná o doplněk k výše uvedenému chování myši.

jezdit tětiva Nepravdivé Automaticky přehraje karusel poté, co uživatel ručně zacyklí první položku. Pokud je „kolotoč“, automaticky se spustí kolotoč při načtení.
zabalit booleovský skutečný Zda by se měl kolotoč nepřetržitě pohybovat nebo mít tvrdé zastávky.

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 objecta 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.carouseludá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.carouseludá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.carouseludálosti).

.carousel('dispose')

Zničí kolotoč prvku.

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žky
  • to: 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 slidevyvolá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…
})