Source

Вртешка

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

Како то ради

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

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

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

На крају, ако градите наш ЈаваСцрипт из извора, он захтеваutil.js .

Пример

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

Обавезно поставите јединствени ИД .carouselза опционалне контроле, посебно ако користите више вртешки на једној страници.

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

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

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

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

Додавање претходне и следеће контроле:

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

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

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

<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>
Потребан је почетни активни елемент

Разред .activeтреба додати на један од слајдова. У супротном, вртешка неће бити видљива.

Са натписима

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

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

Употреба

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

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

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

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

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

$('.carousel').carousel()

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-, као у data-interval="".

Име Тип Уобичајено Опис
интервал број 5000 Количина времена за одлагање између аутоматског циклуса ставке. Ако је нетачно, вртешка се неће аутоматски кретати.
тастатура боолеан истинито Да ли вртешка треба да реагује на догађаје на тастатури.
пауза стринг | боолеан "лебдети"

Ако је подешено на "hover", паузира укључивање вртешке mouseenterи наставља циклус вртешке укључене mouseleave. Ако је подешено на false, задржавање показивача миша преко вртешке га неће паузирати.

На уређајима са омогућеним додиром, када је подешено на "hover", вожња бицикла ће се паузирати touchend(када корисник заврши интеракцију са вртешком) у два интервала, пре него што се аутоматски настави. Имајте на уму да је ово додатак горе наведеном понашању миша.

возити се низ лажно Аутоматски репродукује вртешку након што корисник ручно окрене прву ставку. Ако је „вртешка“, аутоматски репродукује вртешку при учитавању.
замотати боолеан истинито Да ли рингишпил треба да се врти непрекидно или да се тешко зауставља.

Методе

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

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

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

.carousel(options)

Иницијализује вртешку са опционим опцијама objectи почиње да се креће кроз ставке.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Кружи кроз ставке вртешке с лева на десно.

.carousel('pause')

Спречава вртешку да се креће кроз ставке.

.carousel(number)

Кружи вртешку до одређеног оквира (на основу 0, слично низу). Враћа се позиваоцу пре него што је циљна ставка приказана (тј. пре него што се slid.bs.carouselдогађај деси).

.carousel('prev')

Прелази на претходну ставку. Враћа се позиваоцу пре него што је претходна ставка приказана (тј. пре него што се slid.bs.carouselдогађај деси).

.carousel('next')

Прелази на следећу ставку. Враћа се позиваоцу пре него што је приказана следећа ставка (тј. пре него што slid.bs.carouselдође до догађаја).

.carousel('dispose')

Уништава вртешку елемента.

Догађаји

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

  • direction: Смер у коме вртешка клизи (или "left"или "right").
  • relatedTarget: ДОМ елемент који се поставља на своје место као активна ставка.
  • from: Индекс тренутне ставке
  • to: Индекс следеће ставке

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

Тип догађаја Опис
слиде.бс.цароусел Овај догађај се покреће одмах када slideсе позове метод инстанце.
слид.бс.цароусел Овај догађај се покреће када вртешка заврши свој прелаз слајда.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})