Вртешка

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

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

Како то ради

Вртешка је пројекција слајдова за кретање кроз низ садржаја, изграђена помоћу ЦСС 3Д трансформација и мало ЈаваСцрипт-а. Ради са низом слика, текста или прилагођених ознака. Такође укључује подршку за претходне/следеће контроле и индикаторе.

У прегледачима у којима је подржан АПИ за видљивост странице, вртешка ће избегавати клизање када веб страница није видљива кориснику (као што је када је картица прегледача неактивна, прозор прегледача је минимизиран, итд.).

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

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

Пример

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

Разред .activeтреба додати на један од слајдова, иначе вртешка неће бити видљива. Такође обавезно поставите јединствену idза .carouselопционе контроле, посебно ако користите више вртешки на једној страници. Контролни и индикаторски елементи морају имати data-bs-targetатрибут (или hrefза везе) који одговара idелементу .carousel.

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

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

хтмл

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

хтмл

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

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

Такође можете додати индикаторе на вртешку, поред контрола.

хтмл

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

Ознака првог слајда

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

Ознака другог слајда

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

Ознака трећег слајда

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

хтмл

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

Цроссфаде

Додајте .carousel-fadeу вртешку да бисте анимирали слајдове са прелазом који се бледи уместо слајда. У зависности од вашег садржаја вртешке (нпр. слајдова само са текстом), можда ћете желети да додате .bg-bodyили неки прилагођени ЦСС у .carousel-itemс ради правилног унакрсног преливања.

хтмл

<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=""у а .carousel-itemда бисте променили време за одлагање између аутоматског преласка на следећу ставку.

хтмл

<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атрибут тако да се не репродукује аутоматски.

хтмл

<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ЦСС својством. Наслови и контроле имају додатне Сасс променљиве које прилагођавају colorи background-color.

Ознака првог слајда

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

Ознака другог слајда

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

Ознака трећег слајда

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

хтмл

<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Сасс променљиве пре компајлирања или прилагођених стилова ако користите преведени ЦСС. Ако се примењује више прелаза, уверите се да је прво дефинисан прелаз трансформације (нпр 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"за иницијализацију вртешке, морате је сами да иницијализујете. Не може се користити у комбинацији са (сувишним и непотребним) експлицитним ЈаваСцрипт иницијализацијом исте вртешке.

Преко ЈаваСцрипт-а

Ручно позовите вртешку помоћу:

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

Опције

Пошто опције могу да се прослеђују преко атрибута података или ЈаваСцрипт-а, можете додати име опције у data-bs-, као у data-bs-animation="{value}". Обавезно промените тип случаја назива опције из „ цамелЦасе ” у „ кебаб-цасе ” када преносите опције преко атрибута података. На пример, користите data-bs-custom-class="beautifier"уместо data-bs-customClass="beautifier".

Од Боотстрап 5.2.0, све компоненте подржавају експериментални резервисани атрибут података data-bs-configкоји може да садржи једноставну конфигурацију компоненте као ЈСОН стринг. Када елемент има атрибуте data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", коначна titleвредност ће бити 456и одвојени атрибути података ће заменити вредности дате на data-bs-config. Поред тога, постојећи атрибути података могу да садрже ЈСОН вредности попут 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`	Да ли рингишпил треба да се врти непрекидно или да се тешко зауставља.

Методе

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

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

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

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

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

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

Догађаји

Боотстрап-ова класа вртешке излаже два догађаја за спајање на функционалност вртешке. Оба догађаја имају следећа додатна својства:

direction: Смер у коме вртешка клизи (или "left"или "right").
relatedTarget: ДОМ елемент који се поставља на своје место као активна ставка.
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...
})

Вртешка

Како то ради

Пример

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

Са контролама

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

Са натписима

Ознака првог слајда

Ознака другог слајда

Ознака трећег слајда

Цроссфаде

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

Онемогућите превлачење додиром

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

Ознака првог слајда

Ознака другог слајда

Ознака трећег слајда

Прилагођени прелаз

Сасс

Променљиве

Употреба

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

Преко ЈаваСцрипт-а

Опције

Методе

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

Догађаји

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