Skip to main content

Компоненты

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

Карусель

Компонент слайд-шоу для перебора элементов—изображений или слайдов текста—карусели. В браузерах с поддержкой Page Visibility API, карусель позволит избежать переключение слайдов, когда веб-страницы не видны пользователю (например, когда браузер неактивен, окно браузера свернуто и т. д.). Вложенные карусели не поддерживаются.

Содержание

Пример

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img src="..." alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Анимации не поддерживается в Internet Explorer 9

Bootstrap исключительно использует CSS3 для анимации, но Internet Explorer 9 не поддерживает необходимый CSS свойства. Таким образом, нет перехода между слайдами анимация при использовании этого браузера. Мы намеренно решили не включать на основе jQuery нейтрализации для переходов.

Первоначальный активный элемент требуется

На .active класс должен быть добавлен к одному из слайдов. Иначе, карусели не будут видны.

Дополнительные заголовки

Легко добавьте заголовки к слайдам с .carousel-caption элемент в любой .carousel-item. Место просто о дополнительного HTML-кода в там, и он будет автоматически выровнено и отформатировано.

<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>

Вопрос доступности

Компонент карусель вообще не соответствуют стандартам доступности. Если вам нужна совместимость, пожалуйста, рассмотрите другие варианты представления вашего Контента.

Использование

Несколько каруселей

Карусели требуют использования id на контейнер крайних (в .carousel) для управления каруселью, чтобы нормально функционировать. При добавлении нескольких каруселей, или при изменении карусель id, обязательно обновлять соответствующие элементы управления.

С помощью данных атрибутов

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

data-ride="carousel" атрибут используется для обозначения карусели как анимация начиная с загрузки страницы. Он не может быть использован в сочетании с (излишне) явный JavaScript инициализация той же карусели.

Через JavaScript

Вызовите карусель вручную с:

$('.carousel').carousel()

Варианты

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных, введите имя параметр data-, например data-interval="".

Имя Тип По умолчанию Описание
interval number 5000 Время задержки между автоматически задействуя элемент. Если false, карусели не будут автоматически цикла.
pause string | null "hover" Если задано значение "hover", приостанавливает Велоспорт карусели на mouseenter и возобновляет Велоспорт карусели на mouseleave. Если задано значение null, парящий над карусель не остановить.
wrap boolean true Либо карусели непрерывного цикла либо жесткого упора.
keyboard boolean 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">).

Тип События Описание
slide.bs.carousel Это событие возникает сразу же, когда slide метод экземпляра вызывается.
slid.bs.carousel Это событие запускается, когда карусель завершила переход между слайдами.
$('#myCarousel').on('slide.bs.carousel', function () {
  // сделать что-то...
})