Вртешка
Компонента пројекције слајдова за кретање кроз елементе — слике или слајдове текста — попут вртешке.
Како то ради
Вртешка је пројекција слајдова за кретање кроз низ садржаја, изграђена помоћу ЦСС 3Д трансформација и мало ЈаваСцрипт-а. Ради са низом слика, текста или прилагођених ознака. Такође укључује подршку за претходне/следеће контроле и индикаторе.
У прегледачима у којима је подржан АПИ за видљивост странице, вртешка ће избегавати клизање када веб страница није видљива кориснику (као што је када је картица прегледача неактивна, прозор прегледача је минимизиран, итд.).
prefers-reduced-motion
медијског упита. Погледајте одељак о
смањеном покрету наше документације о приступачности .
Имајте на уму да угнежђене вртешке нису подржане, а вртешке углавном нису у складу са стандардима приступачности.
На крају, ако градите наш ЈаваСцрипт из извора, он захтеваutil.js
.
Пример
Вртешке не нормализују аутоматски димензије слајда. Као такви, можда ћете морати да користите додатне услужне програме или прилагођене стилове за одговарајућу величину садржаја. Док вртешке подржавају претходне/следеће контроле и индикаторе, они нису изричито потребни. Додајте и прилагодите како вам одговара.
Разред .active
треба додати на један од слајдова, иначе вртешка неће бити видљива. Такође обавезно поставите јединствену id
за .carousel
опционе контроле, посебно ако користите више вртешки на једној страници. Контролни и индикаторски елементи морају имати data-target
атрибут (или href
за везе) који одговара id
елементу .carousel
.
Само слајдови
Ево вртешке само са слајдовима. Обратите пажњу на присуство .d-block
и .w-100
на сликама вртешке да бисте спречили подразумевано поравнање слика у претраживачу.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-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-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-target="#carouselExampleControls" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</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 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-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Са натписима
Лако додајте наслове својим слајдовима помоћу .carousel-caption
елемента у било ком .carousel-item
. Могу се лако сакрити на мањим оквирима за приказ, као што је приказано у наставку, са опционим услужним програмима за приказ . У почетку их сакривамо помоћу .d-none
и враћамо их на уређаје средње величине помоћу .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<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-target="#carouselExampleCaptions" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Цроссфаде
Додајте .carousel-fade
у вртешку да бисте анимирали слајдове са прелазом који се бледи уместо слајда. У зависности од вашег садржаја вртешке (нпр. слајдова само са текстом), можда ћете желети да додате .bg-body
или неки прилагођени ЦСС у .carousel-item
с ради правилног унакрсног преливања.
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-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-target="#carouselExampleFade" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Индивидуални .carousel-item
интервал
Додајте data-interval=""
у а .carousel-item
да бисте променили време за одлагање између аутоматског преласка на следећу ставку.
<div id="carouselExampleInterval" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-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-target="#carouselExampleInterval" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Онемогућите превлачење додиром
Вртешке подржавају превлачење лево/десно на уређајима са екраном осетљивим на додир за кретање између слајдова. Ово се може онемогућити помоћу data-touch
атрибута. Пример у наставку такође не укључује data-ride
атрибут и има data-interval="false"
тако да се не репродукује аутоматски.
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="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-target="#carouselExampleControlsNoTouching" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
Употреба
Преко атрибута података
Користите атрибуте података да лако контролишете положај вртешке. data-slide
прихвата кључне речи prev
или next
, што мења положај слајда у односу на његову тренутну позицију. Алтернативно, користите data-slide-to
за прослеђивање сировог индекса слајда на вртешку data-slide-to="2"
, која помера позицију слајда на одређени индекс који почиње са 0
.
Атрибут data-ride="carousel"
се користи за означавање вртешке као анимације почевши од учитавања странице. Ако не користите data-ride="carousel"
за иницијализацију вртешке, морате је сами да иницијализујете. Не може се користити у комбинацији са (сувишним и непотребним) експлицитним ЈаваСцрипт иницијализацијом исте вртешке.
Преко ЈаваСцрипт-а
Ручно позовите вртешку помоћу:
$('.carousel').carousel()
Опције
Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-
, као у data-interval=""
.
Име | Тип | Уобичајено | Опис |
---|---|---|---|
интервал | број | 5000 | Количина времена за одлагање између аутоматског циклуса ставке. Ако false је , вртешка се неће аутоматски кретати. |
тастатура | боолеан | истинито | Да ли вртешка треба да реагује на догађаје на тастатури. |
пауза | стринг | боолеан | 'лебдети' | Ако је подешено на На уређајима са омогућеним додиром, када је подешено на |
возити се | низ | лажно | Аутоматски репродукује вртешку након што корисник ручно окрене прву ставку. Ако је подешено на 'carousel' , аутоматски репродукује вртешку при учитавању. |
замотати | боолеан | истинито | Да ли рингишпил треба да се врти непрекидно или да се тешко зауставља. |
додирнути | боолеан | истинито | Да ли вртешка треба да подржава интеракције превлачења лево/десно на уређајима са екраном осетљивим на додир. |
Методе
Асинхроне методе и прелази
Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .
Погледајте нашу ЈаваСцрипт документацију за више информација .
.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')
Уништава вртешку елемента.
.carousel('nextWhenVisible')
Не пребацујете вртешку на следећу када страница није видљива или вртешка или њен родитељ нису видљиви. Враћа се позиваоцу пре него што је приказана следећа ставка (тј. пре него што slid.bs.carousel
дође до догађаја).
.carousel('to')
Кружи вртешку до одређеног оквира (на основу 0, слично низу). Враћа се позиваоцу пре него што је приказана следећа ставка (тј. пре него што slid.bs.carousel
дође до догађаја).
Догађаји
Боотстрап-ова класа вртешке излаже два догађаја за спајање на функционалност вртешке. Оба догађаја имају следећа додатна својства:
direction
: Смер у коме вртешка клизи (или"left"
или"right"
).relatedTarget
: ДОМ елемент који се поставља на своје место као активна ставка.from
: Индекс тренутне ставкеto
: Индекс следеће ставке
Сви догађаји вртешке се активирају на самом вртешком (тј. на <div class="carousel">
).
Тип догађаја | Опис |
---|---|
слиде.бс.цароусел | Овај догађај се покреће одмах када slide се позове метод инстанце. |
слид.бс.цароусел | Овај догађај се покреће када вртешка заврши свој прелаз слајда. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Промените трајање прелаза
Трајање прелаза .carousel-item
се може променити помоћу $carousel-transition
Сасс променљиве пре компајлирања или прилагођених стилова ако користите преведени ЦСС. Ако се примењује више прелаза, уверите се да је прво дефинисан прелаз трансформације (нпр. transition: transform 2s ease, opacity .5s ease-out
).