Карусель

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

Як це працює

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

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

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

Нарешті, якщо ви створюєте наш 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.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</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"використовується, щоб позначити карусель як анімовану, починаючи з завантаження сторінки. Його не можна використовувати в поєднанні з (зайвою та непотрібною) явною ініціалізацією 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…
})

Змінити тривалість переходу

Тривалість переходу .carousel-itemможна змінити за допомогою $carousel-transitionзмінної Sass перед компіляцією або власними стилями, якщо ви використовуєте скомпільований CSS. Якщо застосовано кілька переходів, переконайтеся, що спочатку визначено перехід трансформації (наприклад, transition: transform 2s ease, opacity .5s ease-out).