Карусель

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

На цій сторінці

Як це працює

Карусель — це слайд-шоу для перегляду серії вмісту, створене за допомогою 3D-перетворень CSS і трохи JavaScript. Він працює з серією зображень, текстом або спеціальною розміткою. Він також включає підтримку попередніх/наступних елементів керування та індикаторів.

У браузерах, де підтримується API видимості сторінки , карусель не буде ковзати, коли веб-сторінку не бачить користувач (наприклад, коли вкладка браузера неактивна, вікно браузера згорнуто тощо).

Ефект анімації цього компонента залежить від prefers-reduced-motionмедіа-запиту. Перегляньте розділ про обмежений рух нашої документації щодо спеціальних можливостей .

Зауважте, що вкладені каруселі не підтримуються, а каруселі, як правило, не відповідають стандартам доступності.

приклад

Каруселі не нормалізують автоматично розміри слайдів. Таким чином, вам може знадобитися використовувати додаткові утиліти або спеціальні стилі для належного розміру вмісту. Хоча каруселі підтримують попередні/наступні елементи керування та індикатори, вони не є обов’язковими. Додайте та налаштуйте, як вважаєте за потрібне.

Клас .activeпотрібно додати до одного зі слайдів, інакше карусель не буде видно. Також обов’язково встановіть унікальний idдля .carouselдодаткових елементів керування, особливо якщо ви використовуєте кілька каруселей на одній сторінці. Елементи керування та індикатора повинні мати data-bs-targetатрибут (або hrefдля посилань), який відповідає idелементу .carousel.

Тільки слайди

Ось карусель тільки з гірками. Зверніть увагу на наявність .d-blockі .w-100на карусельних зображеннях, щоб запобігти вирівнюванню зображення браузера за умовчанням.

html

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

html

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

З індикаторами

Ви також можете додати індикатори до каруселі, поряд з елементами керування.

html

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <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.

Мітка першого слайда

Деякий типовий вміст заповнювача для першого слайда.

Мітка другого слайда

Деякий типовий вміст заповнювача для другого слайда.

Етикетка третього слайда

Деякий типовий вміст заповнювача для третього слайда.

html

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <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>

Кроссфейд

Додайте .carousel-fadeдо своєї каруселі, щоб анімувати слайди з плавним переходом замість слайда. Залежно від вмісту вашої каруселі (наприклад, слайди лише з текстом), ви можете додати .bg-bodyабо якийсь власний CSS до .carousel-items для належного перехресного переходу.

html

<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щоб змінити кількість часу затримки між автоматичним переходом до наступного елемента.

html

<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атрибут, тому він не відтворюється автоматично.

html

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="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.

Мітка першого слайда

Деякий типовий вміст заповнювача для першого слайда.

Мітка другого слайда

Деякий типовий вміст заповнювача для другого слайда.

Етикетка третього слайда

Деякий типовий вміст заповнювача для третього слайда.

html

<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

Викликати карусель вручну за допомогою:

const carousel = new bootstrap.Carousel('#myCarousel')

Опції

Оскільки параметри можна передати через атрибути даних або JavaScript, ви можете додати назву параметра до data-bs-, як у data-bs-animation="{value}". Обов’язково змініть тип регістру назви параметра з « camelCase » на « kebab-case » під час передачі параметрів через атрибути даних. Наприклад, використовуйте data-bs-custom-class="beautifier"замість data-bs-customClass="beautifier".

Починаючи з Bootstrap 5.2.0, усі компоненти підтримують експериментальний зарезервований атрибут даних data-bs-config, який може зберігати просту конфігурацію компонента як рядок JSON. Якщо елемент має атрибути data-bs-config='{"delay":0, "title":123}'і data-bs-title="456", остаточне titleзначення буде таким, 456а окремі атрибути даних замінять значення, надані в data-bs-config. Крім того, наявні атрибути даних можуть містити такі значення JSON, як data-bs-delay='{"show":0,"hide":150}'.

Ім'я	Тип	За замовчуванням	опис
`interval`	номер	`5000`	Час затримки між автоматичним перемиканням елемента.
`keyboard`	логічний	`true`	Чи повинна карусель реагувати на події клавіатури.
`pause`	рядок, логічний	`"hover"`	Якщо встановлено значення `"hover"`, призупиняє цикл каруселі `mouseenter`та відновлює цикл каруселі `mouseleave`. Якщо встановлено значення `false`, наведення курсора на карусель не зупинить її. На сенсорних пристроях, коли встановлено значення `"hover"`, цикл призупинятиметься `touchend`(щойно користувач завершить взаємодію з каруселлю) на два інтервали, а потім автоматично поновлюватиметься. Це на додаток до поведінки миші.
`ride`	рядок, логічний	`false`	Якщо встановлено значення `true`, карусель запускається автоматично після того, як користувач вручну перемикає перший елемент. Якщо встановлено значення `"carousel"`, автоматично запускає карусель під час завантаження.
`touch`	логічний	`true`	Чи повинна карусель підтримувати взаємодію пальцем ліворуч/праворуч на пристроях із сенсорним екраном.
`wrap`	логічний	`true`	Чи повинна карусель обертатися безперервно чи мати жорсткі зупинки.

методи

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

Усі методи API є асинхронними та починають перехід . Вони повертаються до абонента, щойно перехід починається, але до його завершення . Крім того, виклик методу компонента, що переходить, ігноруватиметься .

Дивіться нашу документацію JavaScript для отримання додаткової інформації .

Ви можете створити екземпляр каруселі за допомогою конструктора каруселі, наприклад, для ініціалізації додатковими параметрами та початку циклічного переходу між елементами:

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

метод	опис
`cycle`	Переглядає елементи каруселі зліва направо.
`dispose`	Знищує карусель елемента. (Видаляє збережені дані в елементі DOM)
`getInstance`	Статичний метод, який дозволяє отримати екземпляр каруселі, пов’язаний з елементом DOM, ви можете використовувати його так: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Статичний метод, який повертає екземпляр каруселі, пов’язаний з елементом DOM, або створює новий, якщо він не був ініціалізований. Ви можете використовувати його так: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Перехід до наступного елемента. Повертається до абонента до того, як буде показано наступний елемент (наприклад, до `slid.bs.carousel`події).
`nextWhenVisible`	Не переходьте до наступної каруселі, якщо сторінка не відображається або карусель або її батьківський елемент не видно. Повертається до абонента, перш ніж буде показано цільовий елемент .
`pause`	Зупиняє карусель від циклу між предметами.
`prev`	Перехід до попереднього пункту. Повертається до абонента до того, як буде показано попередній елемент (наприклад, до `slid.bs.carousel`події).
`to`	Перемикає карусель до певного кадру (на основі 0, подібно до масиву). Повертається до абонента до того, як буде показано цільовий елемент (наприклад, до `slid.bs.carousel`події).

Події

Клас каруселі Bootstrap надає дві події для підключення до функції каруселі. Обидві події мають такі додаткові властивості:

direction: напрямок, у якому ковзає карусель ( "left"або "right").
relatedTarget: Елемент DOM, який переміщується на місце як активний елемент.
from: Індекс поточного елемента
to: Індекс наступного елемента

Усі події каруселі запускаються на самій каруселі (тобто на <div class="carousel">).

Тип події	опис
`slid.bs.carousel`	Спрацьовує, коли карусель завершує свій слайд-перехід.
`slide.bs.carousel`	Спрацьовує негайно, коли `slide`викликається метод екземпляра.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

Карусель

Як це працює

приклад

Тільки слайди

З елементами керування

З індикаторами

З підписами

Мітка першого слайда

Мітка другого слайда

Етикетка третього слайда

Кроссфейд

Індивідуальний .carousel-itemінтервал

Вимкнути сенсорне гортання

Темний варіант

Мітка першого слайда

Мітка другого слайда

Етикетка третього слайда

Спеціальний перехід

Сасс

Змінні

Використання

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

Через JavaScript

Опції

методи

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

Події

Індивідуальний `.carousel-item`інтервал