Карусель

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

Як це працює

Карусель — це слайд-шоу для перегляду серії вмісту, створене за допомогою 3D-перетворень CSS і трохи 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>

Кроссфейд

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

<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`, карусель не запускатиметься автоматично.
клавіатура	логічний	правда	Чи повинна карусель реагувати на події клавіатури.
пауза	рядок \| логічний	"висати"	Якщо встановлено значення `'hover'`, призупиняє цикл каруселі `mouseenter`та відновлює цикл каруселі `mouseleave`. Якщо встановлено значення `false`, наведення курсора на карусель не зупинить її. На сенсорних пристроях, коли встановлено значення `'hover'`, цикл призупинятиметься `touchend`(щойно користувач завершить взаємодію з каруселлю) на два інтервали, а потім автоматично поновлюватиметься. Зауважте, що це на додаток до описаної вище поведінки миші.
їздити	рядок	помилковий	Автоматично відтворює карусель після того, як користувач вручну перемикає перший елемент. Якщо встановлено значення `'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.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).