Въртележка

Компонент за слайдшоу за циклично преминаване през елементи - изображения или слайдове с текст - като въртележка.

На тази страница

Как работи

Въртележката е слайдшоу за циклично преминаване през поредица от съдържание, изградено с CSS 3D трансформации и малко JavaScript. Работи с поредица от изображения, текст или персонализирано маркиране. Той също така включва поддръжка за предишни/следващи контроли и индикатори.

В браузъри, където API за видимост на страницата се поддържа, въртележката ще избегне плъзгане, когато уеб страницата не е видима за потребителя (като например, когато разделът на браузъра е неактивен, прозорецът на браузъра е минимизиран и т.н.).

Анимационният ефект на този компонент зависи от 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="carousel">
  <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="carousel">
  <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>

Crossfade

Добавете .carousel-fadeкъм вашата въртележка, за да анимирате слайдове с избледняващ преход вместо слайд.

<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=""към a .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атрибута и го има data-bs-interval="false", така че не се пуска автоматично.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-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-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свойството CSS. Надписите и контролите имат допълнителни Sass променливи, които персонализират 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променливата Sass преди компилиране или персонализирани стилове, ако използвате компилирания CSS. Ако са приложени множество преходи, уверете се, че първо е дефиниран преходът за трансформация (напр. 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"за инициализиране на вашата въртележка, трябва да я инициализирате сами. Не може да се използва в комбинация с (излишна и ненужна) изрична JavaScript инициализация на същата въртележка.

Чрез JavaScript

Ръчно извикване на въртележка с:

var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)

Настроики

Опциите могат да се предават чрез атрибути на данни или JavaScript. За атрибути на данни добавете името на опцията към data-bs-, както в data-bs-interval="".

Име	Тип	По подразбиране	Описание
`interval`	номер	`5000`	Времето за забавяне между автоматичното циклиране на елемент. Ако `false`, въртележката няма да се върти автоматично.
`keyboard`	булево	`true`	Дали въртележката трябва да реагира на събития от клавиатурата.
`pause`	низ \| булево	`'hover'`	Ако е зададено на `'hover'`, поставя на пауза въртенето на въртележката на `mouseenter`и възобновява въртенето на въртележката на `mouseleave`. Ако е зададено на `false`, задържането на курсора на мишката върху въртележката няма да я постави на пауза. На устройства със сензорен екран, когато е настроено на `'hover'`, цикълът ще спре `touchend`(след като потребителят приключи взаимодействието с въртележката) за два интервала, преди автоматично да се поднови. Имайте предвид, че това е в допълнение към горното поведение на мишката.
`ride`	низ \| булево	`false`	Пуска автоматично въртележката, след като потребителят ръчно премине първия елемент. Ако е зададено на `'carousel'`, въртележката се пуска автоматично при зареждане.
`wrap`	булево	`true`	Дали въртележката трябва да се върти непрекъснато или да има трудни спирания.
`touch`	булево	`true`	Дали въртележката трябва да поддържа взаимодействия с плъзгане наляво/надясно на устройства със сензорен екран.

Методи

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

Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .

Вижте нашата JavaScript документация за повече информация .

You can create a carousel instance with the carousel constructor, for example, to initialize with additional options and start cycling through items:

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

Method	Description
`cycle`	Cycles through the carousel items from left to right.
`pause`	Stops the carousel from cycling through items.
`prev`	Cycles to the previous item. Returns to the caller before the previous item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`next`	Cycles to the next item. Returns to the caller before the next item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`nextWhenVisible`	Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. Returns to the caller before the target item has been shown
`to`	Cycles the carousel to a particular frame (0 based, similar to an array). Returns to the caller before the target item has been shown (e.g., before the `slid.bs.carousel` event occurs).
`dispose`	Destroys an element's carousel. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: `bootstrap.Carousel.getInstance(element)`
`getOrCreateInstance`	Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized. You can use it like this: `bootstrap.Carousel.getOrCreateInstance(element)`

Events

Bootstrap’s carousel class exposes two events for hooking into carousel functionality. Both events have the following additional properties:

direction: The direction in which the carousel is sliding (either "left" or "right").
relatedTarget: The DOM element that is being slid into place as the active item.
from: The index of the current item
to: The index of the next item

All carousel events are fired at the carousel itself (i.e. at the <div class="carousel">).

Event type	Описание
`slide.bs.carousel`	Задейства се незабавно, когато `slide`се извика методът на екземпляра.
`slid.bs.carousel`	Задейства се, когато въртележката завърши прехода си към слайд.

var myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', function () {
  // do something...
})

Въртележка

Как работи

Пример

Само слайдове

С контроли

С индикатори

С надписи

Етикет на първия слайд

Втори етикет на слайд

Етикет на трети слайд

Crossfade

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

Деактивирайте плъзгането с докосване

Тъмен вариант

Етикет на първия слайд

Втори етикет на слайд

Етикет на трети слайд

Персонализиран преход

дързък

Променливи

Използване

Чрез атрибути на данни

Чрез JavaScript

Настроики

Методи

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

Events

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