Рингишпил

Компонента на слајдшоу за возење велосипед низ елементи - слики или слајдови од текст - како рингишпил.

На оваа страница

Како работи

Вртелешката е слајдшоу за возење велосипед низ серија содржини, изградена со CSS 3D трансформации и малку JavaScript. Работи со серија слики, текст или прилагодено обележување. Вклучува и поддршка за претходни/следни контроли и индикатори.

Во прелистувачите каде што е поддржан API за видливост на страницата , рингишпилот ќе избегне лизгање кога веб-страницата не е видлива за корисникот (како на пр. кога картичката на прелистувачот е неактивна, прозорецот на прелистувачот е минимизиран, итн.).

Ефектот на анимација на оваа компонента зависи од prefers-reduced-motionмедиумското барање. Погледнете го делот за намалено движење од нашата документација за пристапност .

Имајте предвид дека вгнездените вртелешки не се поддржани, а рингишпилите генерално не се усогласени со стандардите за пристапност.

Пример

Вртелешките не ги нормализираат автоматски димензиите на слајдовите. Како такви, можеби ќе треба да користите дополнителни алатки или сопствени стилови за соодветна големина на содржината. Додека вртелешките поддржуваат претходни/следни контроли и индикатори, тие не се експлицитно потребни. Додајте и приспособете како што ви одговара.

Класата .activeтреба да се додаде на еден од слајдовите во спротивно рингишпилот нема да биде видлив. Исто така, погрижете се да поставите уникатна idза .carouselизборните контроли, особено ако користите повеќе вртелешки на една страница. Контролните и индикаторските елементи мора да имаат data-bs-targetатрибут (или hrefза врски) што одговара idна .carouselелементот.

Само слајдови

Еве рингишпил само со слајдови. Забележете го присуството на .d-blockи .w-100на сликите на рингишпилот за да се спречи стандардното порамнување на сликите од прелистувачот.

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>

Со контроли

Додавање на претходните и следните контроли. Препорачуваме да користите <button>елементи, но можете да користите и <a>елементи со 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>

Со индикатори

Можете исто така да ги додадете индикаторите во рингишпилот, заедно со контролите.

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>

Со натписи

Лесно додавајте титлови на вашите слајдови со .carousel-captionелементот во кој било .carousel-item. Тие можат лесно да се сокријат на помали пристаништа за гледање, како што е прикажано подолу, со опционални алатки за приказ . Ги криеме првично со .d-noneи ги враќаме на уреди со средна големина со .d-md-block.

Првата етикета на слајдот

Некои репрезентативни содржини на место за првиот слајд.

Втора етикета на слајдот

Некои репрезентативни содржини на место за вториот слајд.

Етикета за трет слајд

Некои репрезентативни содржини на местенка за третиот слајд.

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>

Crossfade

Додајте .carousel-fadeво вашиот рингишпил за да ги анимирате слајдовите со бледнее транзиција наместо со слајд. Во зависност од содржината на вашата рингишпил (на пр., слајдови само за текст), можеби ќе сакате да додадете .bg-bodyили некоја приспособена CSS на .carousel-items за правилно вкрстување.

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>

Индивидуален `.carousel-item`интервал

Додајте data-bs-interval=""во a .carousel-itemза да го промените времето за одложување помеѓу автоматското возење велосипед до следната ставка.

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>

Оневозможи лизгање со допир

Вртелешките поддржуваат лизгање лево/десно на уредите со екран на допир за да се движите помеѓу слајдовите. Ова може да се оневозможи со користење на data-bs-touchатрибутот. Примерот подолу исто така не го вклучува data-bs-rideатрибутот за да не се репродуцира автоматски.

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>

Темна варијанта

Додајте .carousel-darkво .carouselза потемни контроли, индикатори и натписи. Контролите се превртени од нивното стандардно бело полнење со filterсвојството CSS. Титловите и контролите имаат дополнителни Sass променливи што ги приспособуваат colorи background-color.

Првата етикета на слајдот

Некои репрезентативни содржини на место за првиот слајд.

Втора етикета на слајдот

Некои репрезентативни содржини на место за вториот слајд.

Етикета за трет слајд

Некои репрезентативни содржини на местенка за третиот слајд.

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>

Прилагодена транзиција

Времетраењето на транзицијата на .carousel-itemможе да се смени со $carousel-transition-durationпроменливата Sass пред компајлирањето или приспособените стилови ако користите компајлирана CSS. Ако се применуваат повеќе транзиции, проверете дали транзицијата на трансформацијата е прво дефинирана (на пр transition: transform 2s ease, opacity .5s ease-out.).

Сас

Променливи

Променливи за сите вртелешки:

$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`)

Променливи за темниот рингишпил :

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

Употреба

Преку атрибути на податоци

Користете атрибути на податоци за лесно да ја контролирате положбата на рингишпилот. data-bs-slideги прифаќа клучните зборови prevили next, што ја менува позицијата на слајдот во однос на нејзината моментална позиција. Алтернативно, користете data-bs-slide-toго за пренесување необработен индекс на слајд на рингишпилот data-bs-slide-to="2", кој ја префрла позицијата на слајдот на одреден индекс почнувајќи со 0.

Атрибутот data-bs-ride="carousel"се користи за означување на рингишпил како анимирана почнувајќи од вчитувањето на страницата. Ако не го користите data-bs-ride="carousel"за иницијализирање на вашиот рингишпил, мора сами да го иницијализирате. Не може да се користи во комбинација со (непотребна и непотребна) експлицитна JavaScript иницијализација на истиот рингишпил.

Преку JavaScript

Повикајте рингишпил рачно со:

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

Опции

Бидејќи опциите може да се пренесат преку атрибути на податоци или JavaScript, можете да додадете име на опција на data-bs-, како во data-bs-animation="{value}". Погрижете се да го смените типот на футролата на името на опцијата од „ camelCase “ во „ ќебап-футрола “ кога ги пренесувате опциите преку атрибути на податоци. На пример, користете data-bs-custom-class="beautifier"наместо data-bs-customClass="beautifier".

Почнувајќи од Bootstrap 5.2.0, сите компоненти поддржуваат експериментален атрибут за резервирани податоци data-bs-configшто може да содржи едноставна конфигурација на компоненти како низа JSON. Кога елементот има data-bs-config='{"delay":0, "title":123}'и data-bs-title="456"атрибути, конечната titleвредност ќе биде 456и посебните атрибути на податоци ќе ги отфрлат вредностите дадени на data-bs-config. Покрај тоа, постоечките атрибути на податоци можат да ги сместат вредностите на JSON како data-bs-delay='{"show":0,"hide":150}'.

Име	Тип	Стандардно	Опис
`interval`	број	`5000`	Времето за одложување помеѓу автоматското возење велосипед на ставката.
`keyboard`	булови	`true`	Дали рингишпилот треба да реагира на настани од тастатурата.
`pause`	стринг, бул	`"hover"`	Ако е поставено на `"hover"`, го паузира возењето на вртелешката вклучено `mouseenter`и продолжува со возењето велосипед на рингишпилот вклучено `mouseleave`. Ако е поставено на `false`, лебдењето над рингишпилот нема да го паузира. На уредите со овозможен допир, кога е поставено на `"hover"`, возењето велосипед ќе паузира `touchend`(штом корисникот ќе заврши со интеракцијата со рингишпилот) два интервали, пред автоматски да продолжи. Ова е во прилог на однесувањето на глувчето.
`ride`	стринг, бул	`false`	Ако е поставено на `true`, автоматски ја репродуцира рингишпилот откако корисникот рачно ќе ја циклуси првата ставка. Ако е поставено на `"carousel"`, автоматски ја репродуцира рингишпилот при вчитување.
`touch`	булови	`true`	Дали рингишпилот треба да поддржува интеракции со повлекување лево/десно на уредите со екран на допир.
`wrap`	булови	`true`	Дали рингишпилот треба да кружи непрекинато или да има тешки запирања.

Методи

Асинхрони методи и транзиции

Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .

Погледнете ја нашата JavaScript документација за повеќе информации .

Можете да креирате примерок на рингишпил со конструкторот на рингишпил, на пример, за да се иницијализирате со дополнителни опции и да започнете со возење велосипед низ ставки:

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

Метод	Опис
`cycle`	Вози низ ставките на рингишпил од лево кон десно.
`dispose`	Уништува рингишпил на елемент. (Ги отстранува зачуваните податоци на елементот DOM)
`getInstance`	Статички метод кој ви овозможува да го добиете примерот на рингишпил поврзан со елементот DOM, можете да го користите вака: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Статички метод кој враќа примерок од рингишпил поврзан со елемент DOM или создава нов во случај да не бил иницијализиран. Можете да го користите вака `bootstrap.Carousel.getOrCreateInstance(element)`:.
`next`	Циклуси до следната ставка. Се враќа кај повикувачот пред да се прикаже следната ставка (на пр., пред да се `slid.bs.carousel`случи настанот).
`nextWhenVisible`	Не го префрлајте вртелешкото на следното кога страницата не е видлива или кога рингишпилот или нејзиниот родител не се видливи. Се враќа кај повикувачот пред да се прикаже целната ставка .
`pause`	Го спречува рингишпилот да се движи со велосипед низ предмети.
`prev`	Циклуси до претходната ставка. Се враќа кај повикувачот пред да се прикаже претходната ставка (на пр. пред да се `slid.bs.carousel`случи настанот).
`to`	Циклира рингишпил на одредена рамка (заснована на 0, слично на низа). Се враќа кај повикувачот пред да се прикаже целната ставка (на пр. пред да се `slid.bs.carousel`случи настанот).

Настани

Класата на рингишпил на Bootstrap изложува два настани за приклучување во функционалноста на рингишпилот. Двата настани ги имаат следните дополнителни својства:

direction: Насоката во која се лизга рингишпилот (или "left"или "right").
relatedTarget: Елементот DOM што се става на место како активна ставка.
from: Индексот на тековната ставка
to: Индексот на следната ставка

Сите настани на рингишпил се пукаат на самиот рингишпил (т.е. во <div class="carousel">).

Тип на настан	Опис
`slid.bs.carousel`	Се пука кога рингишпилот ќе ја заврши својата транзиција на лизгање.
`slide.bs.carousel`	Запали веднаш кога `slide`ќе се повика методот на пример.

const myCarousel = document.getElementById('myCarousel')

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

Рингишпил

Како работи

Пример

Само слајдови

Со контроли

Со индикатори

Со натписи

Првата етикета на слајдот

Втора етикета на слајдот

Етикета за трет слајд

Crossfade

Индивидуален .carousel-itemинтервал

Оневозможи лизгање со допир

Темна варијанта

Првата етикета на слајдот

Втора етикета на слајдот

Етикета за трет слајд

Прилагодена транзиција

Сас

Променливи

Употреба

Преку атрибути на податоци

Преку JavaScript

Опции

Методи

Асинхрони методи и транзиции

Настани

Индивидуален `.carousel-item`интервал