Source

Карусель

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

Як це працює

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

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

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

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

приклад

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

Обов’язково встановіть унікальний ідентифікатор .carouselдля додаткових елементів керування, особливо якщо ви використовуєте кілька каруселей на одній сторінці.

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

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

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

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

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

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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 class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </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>
Потрібен початковий активний елемент

Клас .activeпотрібно додати до одного зі слайдів. Інакше каруселі не буде видно.

З підписами

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

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>

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

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

Використовуйте атрибути даних, щоб легко керувати положенням каруселі. data-slideприймає ключові слова prevабо next, які змінюють положення слайда відносно його поточного положення. Крім того, використовуйте data-slide-toдля передачі необробленого індексу слайда до каруселі data-slide-to="2", яка зсуває позицію слайда до певного індексу, що починається з 0.

Атрибут 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…
})