Въртележка
Компонент за слайдшоу за циклично преминаване през елементи - изображения или слайдове с текст - като въртележка.
Как работи
Въртележката е слайдшоу за циклично преминаване през поредица от съдържание, изградено с 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 методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .
.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
настъпи събитието).
събития
Carousel класът на Bootstrap разкрива две събития за свързване към функционалността на въртележката. И двете събития имат следните допълнителни свойства:
direction
: Посоката, в която се плъзга въртележката ("left"
или"right"
).relatedTarget
: DOM елементът, който се плъзга на място като активен елемент.from
: Индексът на текущия елементto
: Индексът на следващия елемент
Всички каруселни събития се задействат в самата въртележка (т.е. в <div class="carousel">
).
Тип събитие | Описание |
---|---|
slide.bs.carousel | Това събитие се задейства веднага, когато slide се извика методът на екземпляра. |
slid.bs.carousel | Това събитие се задейства, когато въртележката завърши своя преход към слайда. |
$('#myCarousel').on('slide.bs.carousel', function () {
// do something...
})
Променете продължителността на прехода
Продължителността на прехода .carousel-item
може да бъде променена с $carousel-transition
променливата Sass преди компилиране или персонализирани стилове, ако използвате компилирания CSS. Ако са приложени множество преходи, уверете се, че първо е дефиниран преходът за трансформация (напр. transition: transform 2s ease, opacity .5s ease-out
).