Компоненты

Более десятка компонентов, созданных для отображения кнопок, выпадающих списков, навигации, предупреждений и многого другого.

Карусель

Карусель - это слайдшоу для циклической смены серии содержимого, построена с помощью CSS 3D преобразований и кода Javascript. Работает с серией изображений или текста, включает поддержку предыдущих/следующий элементов управления и указателей.

В браузерах, где поддерживается Page Visibilty, карусель не будет осуществлять смену слайдов, когда страница не видна пользователю (например, когда вкладка браузера неактивна, окно браузера свернуто и т.д.).

Имейте ввиду, что вложенные карусели не поддерживается, и карусели, как правило, не соответствуют стандартам доступности.

Содержание

Пример

Карусели автоматически не нормализуют размеры слайдов. Таким образом, вам может понадобиться использовать дополнительные утилиты или настраиваемые стили для соответствующего размера содержимого. Хотя карусели поддерживают предыдущие/следующие элементы управления и индикаторы, они не всегда требуются. Добавьте и настройте их по своему усмотрению.

Установите уникальный id на .carousel для дополнительных элементов управления, особенно если вы используете несколько каруселей на одной странице.

Только слайды

Пример карусели с только слайдами. Обратите внимание на наличие .d-block и .img-fluid на изображениях карусели, чтобы предотвратить выравнивание по умолчанию изображения в браузере.

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

С элементами управления

Добавление предыдущих и следующих элементов управления:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" 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" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" 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. Они могут быть легко скрыты на меньших экранах, как показано ниже, с дополнительными display utilities. Мы сначала прячем их с помощью .d-none и возвращаем на medium-sized устройства (устройства среднего размера) с помощью .d-md-block.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h3>...</h3>
    <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="".

Название Тип По умолчанию Описание
interval числовой 5000 Время задержки между автоматическим циклом элемента. Если в качестве параметра передается false, карусель не будет автоматически зацикливаться
keyboard логический true Должна ли карусель реагировать на события клавиатуры.
pause строковый | null "hover" Если установлено значение "hover", приостанавливает прокрутку карусели при наведении курсора mouseenter и возобнавляет прокрутку, когда курсор мыши убирают с карусели mouseleave. Если установлено значение null, при наведении указателя мыши на карусель, она не будет приостанавливаться.
ride строковый false Автоматически запускает карусель после того, как пользователь прокрутит первый элемент. Если "carousel", автоматически запускает карусель при загрузке.
wrap kjubxtcrbq true Должна ли карусель непрерывно прокручиваться или постоянно останавливаться.

Методы

.carousel(options)

Инициализирует карусель с дополнительным параметром object и начинает циклическую прокрутку элементов.

$('.carousel').carousel({
  interval: 2000
})

.carousel('cycle')

Прокрутка элементов карусели слева направо.

.carousel('pause')

Остановка прокрутки элементов карусели.

.carousel(number)

Прокрутка карусели до определенного кадра (начиная с 0, подобно массиву).

.carousel('prev')

Переход к предыдущему элементу.

.carousel('next')

Переход к следующему элементу.

События

Bootstrap класс карусели представляет два события для включения функциональности карусели. Оба события имеют следующие дополнительные свойства:

  • direction: Направление, в котромо карусель прокручивается (влево "left" или вправо "right").
  • relatedTarget: Элемент DOM, который сползает на место в качестве активного элемента.

Все события карусели запускаются в самой карусели (т.е. в <div class="carousel">).

Event Type Description
slide.bs.carousel Это событие срабатывает сразу после вызова метода slide.
slid.bs.carousel Это событие срабатывает, когда карусель завершила переход к слайду. 
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})

Комментарии

На сайте функционирует система проверки ошибок. Обнаружив неточность в тексте, выделите ее и нажмите Ctrl + Enter.

Поддержать проект

x