Source

Карусель

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

Как это работает

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

В браузерах , поддерживающих Page Visibility 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вызове метода экземпляра.
slid.bs.карусель Это событие запускается, когда карусель завершила переход слайдов.
$('#myCarousel').on('slide.bs.carousel', function () {
  // do something…
})