Карусель

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

Як це працює

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

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

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

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

Нарешті, якщо ви створюєте наш JavaScript із вихідного коду, для цього потрібноutil.js .

приклад

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

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

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

Додавання попередніх і наступних елементів керування:

<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>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

З підписами

Легко додавайте підписи до своїх слайдів за допомогою .carousel-captionелемента будь-якого .carousel-item. Їх можна легко приховати на менших вікнах перегляду, як показано нижче, за допомогою додаткових утиліт відображення . Спочатку ми приховуємо їх за допомогою .d-noneі повертаємо їх на пристроях середнього розміру за допомогою .d-md-block.

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

Nulla vitae elit libero, a pharetra augue mollis interdum.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Кроссфейд

Додайте .carousel-fadeдо своєї каруселі, щоб анімувати слайди з плавним переходом замість слайда.

<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>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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>
  <a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</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`(якщо користувач завершить взаємодію з каруселлю) на два інтервали, а потім автоматично поновлюватиметься. Зауважте, що це на додаток до описаної вище поведінки миші.
їздити	рядок	помилковий	Автоматично відтворює карусель після того, як користувач вручну перемикає перший елемент. Якщо "карусель", автоматично відтворює карусель під час завантаження.
загорнути	логічний	правда	Чи повинна карусель обертатися безперервно чи мати жорсткі зупинки.
дотик	логічний	правда	Чи повинна карусель підтримувати взаємодію пальцем ліворуч/праворуч на пристроях із сенсорним екраном.

методи

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

Усі методи 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')`

Знищує карусель елемента.

Події

Клас каруселі 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).