Kolotoč

Komponent prezentácie na prepínanie medzi prvkami – obrázkami alebo snímkami textu – ako je kolotoč.

Na tejto stránke

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

Animačný efekt tohto komponentu závisí od prefers-reduced-motionmediálneho dopytu. Pozrite si časť so zníženým pohybom v našej dokumentácii o prístupnosti .

Upozorňujeme, že vnorené karusely nie sú podporované a karusely vo všeobecnosti nie sú v súlade so štandardmi dostupnosti.

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

Triedu .activeje potrebné pridať na jednu zo snímok, inak nebude kolotoč viditeľný. Nezabudnite tiež nastaviť jedinečné idna .carouselvoliteľné ovládacie prvky, najmä ak používate viacero karuselov na jednej stránke. Prvky ovládacích prvkov a indikátorov musia mať data-bs-targetatribút (alebo hrefpre odkazy), ktorý sa zhoduje ids daným .carouselprvkom.

Iba diapozitívy

Tu je kolotoč iba so sklíčkami. Všimnite si prítomnosť obrázkov .d-blocka .w-100na karuseli, aby ste zabránili predvolenému zarovnaniu obrázkov prehliadača.

html

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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ádaním

Pridanie predchádzajúceho a nasledujúceho ovládacieho prvku. Odporúčame použiť <button>prvky, ale môžete použiť aj <a>prvky s role="button".

html

<div id="carouselExampleControls" class="carousel slide" data-bs-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-bs-target="#carouselExampleControls" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

S indikátormi

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

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</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

Nejaký reprezentatívny zástupný obsah pre prvú snímku.

Štítok druhej snímky

Nejaký reprezentatívny zástupný obsah pre druhú snímku.

Štítok tretej snímky

Nejaký reprezentatívny zástupný obsah pre tretiu snímku.

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Prelínanie

Pridajte .carousel-fadedo svojho kolotoča a animujte snímky s prechodom miznutia namiesto snímky. V závislosti od obsahu karuselu (napr. len textové snímky) možno budete chcieť pridať .bg-bodyalebo nejaké vlastné CSS do .carousel-items pre správne prelínanie.

html

<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-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-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Individuálny `.carousel-item`interval

Pridajte data-bs-interval=""k a , ak .carousel-itemchcete zmeniť čas oneskorenia medzi automatickým prechodom na ďalšiu položku.

html

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Zakázať posúvanie dotykom

Karusely podporujú potiahnutie prstom doľava/doprava na zariadeniach s dotykovou obrazovkou na pohyb medzi snímkami. Toto je možné deaktivovať pomocou data-bs-touchatribútu. Nižšie uvedený príklad tiež nezahŕňa data-bs-rideatribút, takže sa neprehráva automaticky.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Tmavý variant

Pridajte .carousel-darkdo .carouselpre tmavšie ovládacie prvky, indikátory a titulky. Ovládacie prvky boli invertované z ich predvolenej bielej výplne s vlastnosťou filterCSS. Titulky a ovládacie prvky majú ďalšie premenné Sass, ktoré prispôsobujú colora background-color.

Štítok prvej snímky

Nejaký reprezentatívny zástupný obsah pre prvú snímku.

Štítok druhej snímky

Nejaký reprezentatívny zástupný obsah pre druhú snímku.

Štítok tretej snímky

Nejaký reprezentatívny zástupný obsah pre tretiu snímku.

html

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Vlastný prechod

Trvanie prechodu .carousel-itemje možné zmeniť pomocou $carousel-transition-durationpremennej Sass pred kompiláciou alebo pomocou vlastných štýlov, ak používate kompilovaný CSS. Ak je použitých viacero prechodov, uistite sa, že prechod transformácie je definovaný ako prvý (napr transition: transform 2s ease, opacity .5s ease-out. ).

Sass

Premenné

Premenné pre všetky karusely:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Premenné pre tmavý kolotoč :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Použitie

Cez dátové atribúty

Pomocou atribútov údajov môžete jednoducho ovládať polohu karuselu. data-bs-slideakceptuje kľúčové slová prevalebo next, čím sa zmení poloha snímky vzhľadom na jej aktuálnu pozíciu. Prípadne použite data-bs-slide-tona odovzdanie nespracovaného indexu snímky do karuselu data-bs-slide-to="2", ktorý posunie pozíciu snímky na konkrétny index začínajúci na 0.

Atribút data-bs-ride="carousel"sa používa na označenie karuselu ako animovaného pri načítaní stránky. Ak karusel nepoužívate data-bs-ride="carousel"na inicializáciu, musíte ho inicializovať sami. 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:

const carousel = new bootstrap.Carousel('#myCarousel')

možnosti

Keďže možnosti možno odovzdať prostredníctvom atribútov údajov alebo jazyka JavaScript, môžete pridať názov možnosti k data-bs-, ako v data-bs-animation="{value}". Pri odovzdávaní možností cez atribúty údajov nezabudnite zmeniť typ prípadu názvu možnosti z „ camelCase “ na „ kebab-case “. Napríklad použite data-bs-custom-class="beautifier"namiesto data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všetky komponenty podporujú experimentálny atribút rezervovaných údajov data-bs-config, ktorý môže obsahovať jednoduchú konfiguráciu komponentu ako reťazec JSON. Ak má prvok atribúty data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné atribúty údajov prepíšu hodnoty uvedené na data-bs-config. Existujúce dátové atribúty môžu navyše obsahovať hodnoty JSON ako data-bs-delay='{"show":0,"hide":150}'.

názov	Typ	Predvolené	Popis
`interval`	číslo	`5000`	Čas oneskorenia medzi automatickým cyklovaním položky.
`keyboard`	boolovská hodnota	`true`	Či má kolotoč reagovať na udalosti klávesnice.
`pause`	reťazec, boolean	`"hover"`	Ak je nastavené na `"hover"`, pozastaví cyklovanie kolotoča `mouseenter`a obnoví cyklovanie kolotoča zapnuté `mouseleave`. Ak je nastavená na `false`, umiestnením kurzora myši nad karusel sa nezastaví. Ak je na zariadeniach s dotykovým ovládaním nastavená možnosť `"hover"`, cyklovanie sa pozastaví `touchend`(keď používateľ dokončí interakciu s karuselom) na dva intervaly a potom sa automaticky obnoví. Toto je doplnok k správaniu myši.
`ride`	reťazec, boolean	`false`	Ak je nastavené na `true`, automaticky sa prehrá karusel po tom, čo používateľ manuálne prejde na prvú položku. Ak je nastavené na `"carousel"`, automaticky sa spustí kolotoč pri načítaní.
`touch`	boolovská hodnota	`true`	Či má karusel podporovať interakcie potiahnutím prstom doľava/doprava na zariadeniach s dotykovou obrazovkou.
`wrap`	boolovská hodnota	`true`	Či má kolotoč nepretržite cyklovať alebo má mať tvrdé zastávky.

Metódy

Asynchrónne metódy a prechody

Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .

Viac informácií nájdete v našej dokumentácii JavaScript .

Môžete vytvoriť inštanciu karuselu pomocou konštruktora karuselu, napríklad na inicializáciu s ďalšími možnosťami a začať cyklicky prechádzať položkami:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Metóda	Popis
`cycle`	Prechádza položkami kolotoča zľava doprava.
`dispose`	Zničí kolotoč prvku. (Odstráni uložené údaje v prvku DOM)
`getInstance`	Statická metóda, ktorá vám umožňuje priradiť inštanciu karuselu k prvku DOM, môžete ju použiť takto: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Statická metóda, ktorá vráti inštanciu karuselu priradenú k prvku DOM alebo vytvorí novú v prípade, že nebola inicializovaná. Môžete ho použiť takto: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Prejde na ďalšiu položku. Vráti sa k volajúcemu pred zobrazením ďalšej položky (napr. pred `slid.bs.carousel`výskytom udalosti).
`nextWhenVisible`	Nepresúvajte otočný pás na ďalšiu, keď nie je viditeľná stránka alebo nie je viditeľná otočná lišta alebo jej nadradený prvok. Vráti sa k volajúcemu skôr, ako sa zobrazí cieľová položka .
`pause`	Zastaví kolotoč prechádzať položkami.
`prev`	Prejde na predchádzajúcu položku. Vráti sa k volajúcemu pred zobrazením predchádzajúcej položky (napr. pred `slid.bs.carousel`výskytom udalosti).
`to`	Cyklizuje karusel na konkrétny rámec (na základe 0, podobne ako pole). Vráti sa k volajúcemu pred zobrazením cieľovej položky (napr. pred `slid.bs.carousel`výskytom udalosti).

Diania

Trieda karuselu Bootstrap odhaľuje dve udalosti na pripojenie k funkcii karuselu. Obe udalosti majú nasledujúce ďalšie vlastnosti:

direction: Smer, v ktorom sa kolotoč posúva (buď "left"alebo "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">).

Typ udalosti	Popis
`slid.bs.carousel`	Spustí sa, keď kolotoč dokončí posuvný prechod.
`slide.bs.carousel`	Spustí sa okamžite pri `slide`vyvolaní metódy inštancie.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

Kolotoč

Ako to funguje

Príklad

Iba diapozitívy

S ovládaním

S indikátormi

S titulkami

Štítok prvej snímky

Štítok druhej snímky

Štítok tretej snímky

Prelínanie

Individuálny .carousel-iteminterval

Zakázať posúvanie dotykom

Tmavý variant

Štítok prvej snímky

Štítok druhej snímky

Štítok tretej snímky

Vlastný prechod

Sass

Premenné

Použitie

Cez dátové atribúty

Cez JavaScript

možnosti

Metódy

Asynchrónne metódy a prechody

Diania

Individuálny `.carousel-item`interval