Рингишпил
Компонента на слајдшоу за возење велосипед низ елементи - слики или слајдови од текст - како рингишпил.
Како работи
Вртелешката е слајдшоу за возење велосипед низ серија содржини, изградена со CSS 3D трансформации и малку JavaScript. Работи со серија слики, текст или прилагодено обележување. Вклучува и поддршка за претходни/следни контроли и индикатори.
Во прелистувачите каде што е поддржан API за видливост на страницата , рингишпилот ќе избегне лизгање кога веб-страницата не е видлива за корисникот (како на пр. кога картичката на прелистувачот е неактивна, прозорецот на прелистувачот е минимизиран, итн.).
prefers-reduced-motion
медиумското барање. Погледнете го делот за
намалено движење од нашата документација за пристапност .
Имајте предвид дека вгнездените вртелешки не се поддржани, а рингишпилите генерално не се усогласени со стандардите за пристапност.
И на крај, ако го градите нашиот JavaScript од извор, тоа бара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>
Crossfade
Додајте .carousel-fade
во вашиот рингишпил за да ги анимирате слајдовите со бледнее транзиција наместо со слајд. Во зависност од содржината на вашата рингишпил (на пр., слајдови само за текст), можеби ќе сакате да додадете .bg-body
или некоја приспособена CSS на .carousel-item
s за правилно вкрстување.
<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=""
во a .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"
за иницијализирање на вашиот рингишпил, мора сами да го иницијализирате. Не може да се користи во комбинација со (непотребна и непотребна) експлицитна JavaScript иницијализација на истиот рингишпил.
Преку JavaScript
Повикајте рингишпил рачно со:
$('.carousel').carousel()
Опции
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-
, како во data-interval=""
.
Име | Тип | Стандардно | Опис |
---|---|---|---|
интервал | број | 5000 | Времето за одложување помеѓу автоматското возење велосипед на ставката. Ако false , рингишпилот нема автоматски да циклира. |
тастатура | булови | вистина | Дали рингишпилот треба да реагира на настани од тастатурата. |
пауза | низа | булови | „лебдиш“ | Ако е поставено на На уредите со овозможен допир, кога е поставено на |
возење | низа | лажни | Автоматски ја репродуцира рингишпилот откако корисникот рачно ќе ја циклуси првата ставка. Ако е поставено на 'carousel' , автоматски ја репродуцира рингишпилот при вчитување. |
завиткајте | булови | вистина | Дали рингишпилот треба да кружи непрекинато или да има тешки запирања. |
допир | булови | вистина | Дали рингишпилот треба да поддржува интеракции со повлекување лево/десно на уредите со екран на допир. |
Методи
Асинхрони методи и транзиции
Сите API методи се асинхрони и започнуваат транзиција . Тие се враќаат кај повикувачот штом ќе започне транзицијата, но пред да заврши . Дополнително, повик на метод на компонента во транзиција ќе се игнорира .
Погледнете ја нашата JavaScript документација за повеќе информации .
.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
случи настанот).
Настани
Класата на рингишпил на Bootstrap изложува два настани за приклучување во функционалноста на рингишпилот. Двата настани ги имаат следните дополнителни својства:
direction
: Насоката во која се лизга рингишпилот (или"left"
или"right"
).relatedTarget
: Елементот DOM што се става на место како активна ставка.from
: Индексот на тековната ставкаto
: Индексот на следната ставка
Сите настани на рингишпил се пукаат на самиот рингишпил (т.е. во <div class="carousel">
).
Тип на настан | Опис |
---|---|
слајд.бс.рингишпил | Овој настан се вклучува веднаш кога slide ќе се повика методот на пример. |
се лизна.бс.рингишпил | Овој настан се активира кога рингишпилот ќе ја заврши својата транзиција на слајд. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Променете го времетраењето на транзицијата
Времетраењето на транзицијата на .carousel-item
може да се смени со $carousel-transition
променливата Sass пред компајлирањето или приспособените стилови ако користите компајлирана CSS. Ако се применуваат повеќе транзиции, проверете дали транзицијата на трансформацијата е прво дефинирана (на пр. transition: transform 2s ease, opacity .5s ease-out
).