in English

Карусель

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

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

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

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

Эффект анимации этого компонента зависит от prefers-reduced-motionмедиа-запроса. См. раздел с ограниченным движением в нашей документации по специальным возможностям .

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

Наконец, если вы создаете наш JavaScript из исходного кода, для этого требуетсяutil.js .

Пример

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

Класс .activeнужно добавить на один из слайдов иначе карусели не будет видно. Также не забудьте установить уникальный idдля .carouselдополнительных элементов управления, особенно если вы используете несколько каруселей на одной странице. Элементы управления и индикаторы должны иметь data-targetатрибут (или hrefдля ссылок), соответствующий idатрибуту .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>

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

Добавление в предыдущий и следующий элементы управления. Мы рекомендуем использовать <button>элементы, но вы также можете использовать <a>элементы с расширением role="button".

<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>
 <button class="carousel-control-prev" type="button" data-target="#carouselExampleControls" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControls" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

С подписями

Легко добавляйте подписи к слайдам с помощью .carousel-captionэлемента в любом файле .carousel-item. Их можно легко скрыть на небольших окнах просмотра, как показано ниже, с помощью дополнительных утилит отображения . Сначала мы скрываем их с помощью .d-noneи возвращаем на устройства среднего размера с помощью .d-md-block.

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>Some representative placeholder content for the first slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>Some representative placeholder content for the second slide.</p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>Some representative placeholder content for the third slide.</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleCaptions" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleCaptions" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Кроссфейд

Добавьте .carousel-fadeв свою карусель, чтобы анимировать слайды с плавным переходом вместо слайда. В зависимости от содержимого вашей карусели (например, слайды, содержащие только текст), вы можете добавить .bg-bodyили какой-либо пользовательский CSS в .carousel-items для правильного плавного перехода.

<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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleFade" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleFade" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Добавьте 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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleInterval" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleInterval" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Отключить сенсорное смахивание

Карусели поддерживают смахивание влево/вправо на устройствах с сенсорным экраном для перемещения между слайдами. Это можно отключить с помощью data-touchатрибута. Пример ниже также не включает этот data-rideатрибут, data-interval="false"поэтому он не воспроизводится автоматически.

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-touch="false" data-interval="false">
  <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>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleControlsNoTouching" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Применение

Через атрибуты данных

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

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

Через JavaScript

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

$('.carousel').carousel()

Опции

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

Имя Тип По умолчанию Описание
интервал количество 5000 Количество времени задержки между автоматическим циклом элемента. Если false, карусель не будет автоматически циклироваться.
клавиатура логический истинный Должна ли карусель реагировать на события клавиатуры.
Пауза строка | логический 'парить'

Если установлено значение 'hover', приостанавливает циклирование карусели mouseenterи возобновляет циклическое движение карусели при включении mouseleave. Если установлено значение false, наведение курсора на карусель не приостановит ее.

На устройствах с сенсорным экраном, если установлено значение 'hover', цикл будет приостанавливаться touchend(после того, как пользователь завершит взаимодействие с каруселью) на два интервала, а затем автоматически возобновится. Обратите внимание, что это в дополнение к описанному выше поведению мыши.
поездка нить ЛОЖЬ Автовоспроизведение карусели после того, как пользователь вручную прокрутит первый элемент. Если установлено значение 'carousel', карусель автоматически воспроизводится при загрузке.
сворачивать логический истинный Должна ли карусель вращаться непрерывно или делать резкие остановки.
трогать логический истинный Должна ли карусель поддерживать смахивание влево/вправо на устройствах с сенсорным экраном.

Методы

Асинхронные методы и переходы

Все методы 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')

Уничтожает карусель элемента.

.carousel('nextWhenVisible')

Не переключайте карусель на следующую, если страница не видна или карусель или ее родитель не видны. Возвращает вызывающему объекту до того, как будет показан следующий элемент (т. е. до того , как slid.bs.carouselпроизойдет событие).

.carousel('to')

Циклически перемещает карусель к определенному кадру (на основе 0, подобно массиву). Возвращает вызывающему объекту до того, как будет показан следующий элемент (т. е. до того , как slid.bs.carouselпроизойдет событие).

События

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

  • direction: направление, в котором движется карусель ( "left"или "right").
  • relatedTarget: элемент DOM, который вставляется на место в качестве активного элемента.
  • from: индекс текущего элемента
  • to: Индекс следующего элемента

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

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

Изменить продолжительность перехода

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