Карусель

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

Як це працює

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

З підписами

Легко додавайте підписи до своїх слайдів за допомогою .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 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="".

методи

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

$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})