Kolotoč

Komponenta prezentace pro procházení prvků – obrázků nebo snímků textu – jako je karusel.

Na této straně

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

Efekt animace této komponenty závisí na prefers-reduced-motiondotazu na média. Podívejte se na část s omezeným pohybem v naší dokumentaci přístupnosti .

Mějte prosím na paměti, že vnořené karusely nejsou podporovány a karusely obecně nejsou v souladu se standardy přístupnosti.

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é idna .carouselvolitelných ovládacích prvcích, zvláště pokud používáte více karuselu na jedné stránce. Ovládací a indikační prvky musí mít data-bs-targetatribut (nebo hrefpro odkazy), který odpovídá idprvku .carousel.

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.

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ádáním

Přidání předchozího a dalšího ovládacího prvku. Doporučujeme používat <button>prvky, ale můžete použít i <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átory

Kromě ovládacích prvků můžete do karuselu přidat také 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 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.

První štítek snímku

Nějaký reprezentativní zástupný obsah pro první snímek.

Štítek druhého snímku

Nějaký reprezentativní zástupný obsah pro druhý snímek.

Štítek třetího snímku

Nějaký reprezentativní zástupný obsah pro třetí snímek.

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>

Prolínání

Přidejte .carousel-fadedo svého karuselu a animujte snímky s přechodem zeslabování namísto snímku. V závislosti na obsahu karuselu (např. snímky pouze s textem) možná budete chtít přidat .bg-bodynebo nějaké vlastní CSS do .carousel-items pro správné prolínání.

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ální `.carousel-item`interval

Přidejte data-bs-interval=""k a , chcete- .carousel-itemli změnit dobu prodlevy mezi automatickým cyklováním k další položce.

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ázat přejíždění dotykem

Karusely podporují přejíždění prstem doleva/doprava na zařízeních s dotykovou obrazovkou pro pohyb mezi snímky. To lze zakázat pomocí data-bs-touchatributu. Níže uvedený příklad také nezahrnuje data-bs-rideatribut, takže se nepřehrává 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á varianta

Přidejte .carousel-darkdo .carouselpro tmavší ovládací prvky, indikátory a titulky. Ovládací prvky byly invertovány ze své výchozí bílé výplně pomocí vlastnosti filterCSS. Titulky a ovládací prvky mají další proměnné Sass, které přizpůsobují colora background-color.

První štítek snímku

Nějaký reprezentativní zástupný obsah pro první snímek.

Štítek druhého snímku

Nějaký reprezentativní zástupný obsah pro druhý snímek.

Štítek třetího snímku

Nějaký reprezentativní zástupný obsah pro třetí snímek.

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í přechod

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

Sass

Proměnné

Proměnné pro všechny 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`)

Proměnné pro tmavý kolotoč :

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

Používání

Prostřednictvím datových atributů

Pomocí atributů dat můžete snadno ovládat polohu karuselu. data-bs-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-bs-slide-tok předání nezpracovaného indexu snímku do karuselu data-bs-slide-to="2", který posune pozici snímku na konkrétní index začínající na 0.

Atribut data-bs-ride="carousel"se používá k označení karuselu jako animovaného počínaje načtením stránky. Pokud karusel nepoužíváte data-bs-ride="carousel"k inicializaci, musíte jej inicializovat sami. 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í:

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

Možnosti

Protože volby lze předávat prostřednictvím datových atributů nebo JavaScriptu, můžete přidat název volby k data-bs-, jako v data-bs-animation="{value}". Při předávání možností prostřednictvím datových atributů se ujistěte, že jste změnili typ případu názvu možnosti z „ camelCase “ na „ kebab-case “. Použijte například data-bs-custom-class="beautifier"místo data-bs-customClass="beautifier".

Od Bootstrapu 5.2.0 všechny komponenty podporují experimentální atribut vyhrazených dat data-bs-config, který může obsahovat jednoduchou konfiguraci komponenty jako řetězec JSON. Když má prvek atributy data-bs-config='{"delay":0, "title":123}'a data-bs-title="456", konečná titlehodnota bude 456a samostatné datové atributy přepíší hodnoty uvedené na data-bs-config. Kromě toho mohou existující datové atributy obsahovat hodnoty JSON, jako je data-bs-delay='{"show":0,"hide":150}'.

název	Typ	Výchozí	Popis
`interval`	číslo	`5000`	Doba prodlevy mezi automatickým cyklováním položky.
`keyboard`	booleovský	`true`	Zda má karusel reagovat na události klávesnice.
`pause`	řetězec, booleovský	`"hover"`	Je-li nastaveno na `"hover"`, pozastaví cyklování karuselu `mouseenter`a 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 `touchend`dva intervaly pozastaví (jakmile uživatel dokončí interakci s karuselem), než se automaticky obnoví. To je navíc k chování myši.
`ride`	řetězec, booleovský	`false`	Je-li nastaveno na `true`, automaticky přehraje karusel poté, co uživatel ručně zacyklí první položku. Pokud je nastaveno na `"carousel"`, automaticky se při načtení přehraje karusel.
`touch`	booleovský	`true`	Zda má karusel podporovat interakce přejetí prstem doleva/doprava na zařízeních s dotykovou obrazovkou.
`wrap`	booleovský	`true`	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 .

Můžete vytvořit instanci karuselu pomocí konstruktoru karuselu, například pro inicializaci s dalšími možnostmi a začít procházet položky:

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

Metoda	Popis
`cycle`	Prochází položky karuselu zleva doprava.
`dispose`	Zničí kolotoč prvku. (Odstraní uložená data v prvku DOM)
`getInstance`	Statická metoda, která vám umožní získat instanci karuselu přidruženou k prvku DOM, můžete ji použít takto: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Statická metoda, která vrátí instanci karuselu přidruženou k prvku DOM nebo vytvoří novou v případě, že nebyla inicializována. Můžete jej použít takto: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Přejde na další položku. Vrátí se k volajícímu před zobrazením další položky (např. před `slid.bs.carousel`výskytem události).
`nextWhenVisible`	Nepřejíždějte karusel na další, když není viditelná stránka nebo karusel nebo jeho nadřazený prvek. Vrátí se k volajícímu před zobrazením cílové položky .
`pause`	Zastaví kolotoč v procházení položek.
`prev`	Přejde na předchozí položku. Vrátí se k volajícímu před zobrazením předchozí položky (např. před `slid.bs.carousel`výskytem události).
`to`	Cykluje karusel na konkrétní rámec (na základě 0, podobně jako pole). Vrátí se k volajícímu dříve, než byla zobrazena cílová položka (např. než dojde k `slid.bs.carousel`události).

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
`slid.bs.carousel`	Spustí se, když karusel dokončí posuvný přechod.
`slide.bs.carousel`	Spustí se okamžitě, když `slide`je vyvolána metoda instance.

const myCarousel = document.getElementById('myCarousel')

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

Kolotoč

Jak to funguje

Příklad

Pouze diapozitivy

S ovládáním

S indikátory

S titulky

První štítek snímku

Štítek druhého snímku

Štítek třetího snímku

Prolínání

Individuální .carousel-iteminterval

Zakázat přejíždění dotykem

Tmavá varianta

První štítek snímku

Štítek druhého snímku

Štítek třetího snímku

Vlastní přechod

Sass

Proměnné

Používání

Prostřednictvím datových atributů

Prostřednictvím JavaScriptu

Možnosti

Metody

Asynchronní metody a přechody

Události

Individuální `.carousel-item`interval