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

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

Nezabudnite nastaviť jedinečné ID .carouselpre voliteľné ovládacie prvky, najmä ak používate viacero karuselov na jednej stránke.

Iba diapozitívy

Tu je kolotoč iba so sklíčkami. Všimnite si prítomnosť obrázkov .d-blocka .img-fluidna 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 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ádaním

Pridanie predchádzajúcich a nasledujúcich ovládacích prvkov:

Predchádzajúce Ďalšie

<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átormi

Okrem ovládacích prvkov môžete do kolotoča pridať aj indikátory.

Predchádzajúce Ďalšie

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

S titulkami

Pridajte titulky na svoje snímky jednoducho pomocou .carousel-captionprvku 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 zobrazovacích nástrojov . Pôvodne ich skryjeme pomocou .d-nonea vrátime ich späť na stredne veľké zariadenia pomocou .d-md-block.

Štítok prvej snímky

Nulla vitae elit libero, pharetra augue mollis interdum.

Štítok druhej snímky

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Štítok tretej snímky

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

Predchádzajúce Ďalšie

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

Použitie

Cez dátové atribúty

Pomocou atribútov údajov môžete jednoducho ovládať polohu karuselu. data-slideakceptuje kľúčové slová prevalebo next, ktoré zmenia pozíciu snímky vzhľadom na jej aktuálnu pozíciu. Prípadne použite data-slide-tona 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. 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="".

Metódy

.carousel(options)

Inicializuje kolotoč s voliteľnými možnosťami objecta 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)

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: Prvok DOM, ktorý sa posúva na miesto ako aktívna položka.
• from: Index aktuálnej položky
• to: Index ďalšej položky

Všetky udalosti karuselu sa spúšťajú na samotnom kolotoči (tj na <div class="carousel">).

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})