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

Třídu .activeje třeba přidat na jeden ze snímků, jinak nebude karusel viditelný. Nezapomeňte také nastavit jedinečné ID .carouselpro volitelné ovládací prvky, zejména pokud používáte více karuselu na jedné stránce. Prvky ovládacích prvků a indikátorů musí mít data-targetatribut (nebo hrefpro odkazy), který odpovídá id .carouselprvku.

Pouze diapozitivy

Zde je kolotoč pouze se skluzavkami. Všimněte si přítomnosti obrázků .d-blocka .w-100na 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" 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>

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>

Prolínání

Přidejte .carousel-fadedo svého karuselu a animujte snímky s přechodem zeslabování namísto snímku.

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" 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="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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 number 5000 The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
keyboard boolean true Whether the carousel should react to keyboard events.
pause string | boolean "hover"

If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.

ride string false Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
wrap boolean true Whether the carousel should cycle continuously or have hard stops.

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

.carousel(options)

Initializes the carousel with an optional options object and starts cycling through items.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Cycles through the carousel items from left to right.

.carousel('pause')

Stops the carousel from cycling through items.

.carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('prev')

Cycles to the previous item. Returns to the caller before the previous item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('next')

Cycles to the next item. Returns to the caller before the next item has been shown (i.e. before the slid.bs.carousel event occurs).

.carousel('dispose')

Destroys an element’s carousel.

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

  • direction: The direction in which the carousel is sliding (either "left" or "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…
})

Změnit dobu přechodu

Trvání přechodu .carousel-itemlze změnit pomocí $carousel-transitionpromě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).