Карусель

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

На этой странице

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

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

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

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

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

Пример

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

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

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

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

HTML

<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-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".

HTML

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

С индикаторами

Вы также можете добавить индикаторы в карусель вместе с элементами управления.

HTML

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="true">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

С подписями

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

Метка первого слайда

Некоторый репрезентативный заполнитель для первого слайда.

Метка второго слайда

Некоторый репрезентативный заполнитель для второго слайда.

Метка третьего слайда

Некоторый репрезентативный заполнитель для третьего слайда.

HTML

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <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-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Кроссфейд

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

HTML

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

Индивидуальный `.carousel-item`интервал

Добавьте data-bs-interval=""к a, .carousel-itemчтобы изменить время задержки между автоматическим переходом к следующему элементу.

HTML

<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

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

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

HTML

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

Темный вариант

Добавьте .carousel-darkк .carouselболее темным элементам управления, индикаторам и подписям. Элементы управления были инвертированы из их белой заливки по умолчанию с filterпомощью свойства CSS. Заголовки и элементы управления имеют дополнительные переменные Sass, которые настраивают colorфайлы background-color.

Метка первого слайда

Некоторый репрезентативный заполнитель для первого слайда.

Метка второго слайда

Некоторый репрезентативный заполнитель для второго слайда.

Метка третьего слайда

Некоторый репрезентативный заполнитель для третьего слайда.

HTML

<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <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" data-bs-interval="2000">
      <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-bs-target="#carouselExampleDark" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

Пользовательский переход

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

Сасс

Переменные

Переменные для всех каруселей:

$carousel-control-color:             $white;
$carousel-control-width:             15%;
$carousel-control-opacity:           .5;
$carousel-control-hover-opacity:     .9;
$carousel-control-transition:        opacity .15s ease;

$carousel-indicator-width:           30px;
$carousel-indicator-height:          3px;
$carousel-indicator-hit-area-height: 10px;
$carousel-indicator-spacer:          3px;
$carousel-indicator-opacity:         .5;
$carousel-indicator-active-bg:       $white;
$carousel-indicator-active-opacity:  1;
$carousel-indicator-transition:      opacity .6s ease;

$carousel-caption-width:             70%;
$carousel-caption-color:             $white;
$carousel-caption-padding-y:         1.25rem;
$carousel-caption-spacer:            1.25rem;

$carousel-control-icon-width:        2rem;

$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>");
$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>");

$carousel-transition-duration:       .6s;
$carousel-transition:                transform $carousel-transition-duration ease-in-out; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

Переменные для темной карусели :

$carousel-dark-indicator-active-bg:  $black;
$carousel-dark-caption-color:        $black;
$carousel-dark-control-icon-filter:  invert(1) grayscale(100);

Применение

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

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

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

Через JavaScript

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

const carousel = new bootstrap.Carousel('#myCarousel')

Опции

Поскольку параметры можно передавать через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Не забудьте изменить тип регистра имени параметра с « camelCase » на « kebab-case » при передаче параметров через атрибуты данных. Например, используйте data-bs-custom-class="beautifier"вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}'и data-bs-title="456", окончательное titleзначение будет таким, 456и отдельные атрибуты данных будут переопределять значения, заданные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Имя	Тип	По умолчанию	Описание
`interval`	количество	`5000`	Количество времени задержки между автоматическим циклом элемента.
`keyboard`	логический	`true`	Должна ли карусель реагировать на события клавиатуры.
`pause`	строка, логическое значение	`"hover"`	Если установлено значение `"hover"`, приостанавливает циклирование карусели `mouseenter`и возобновляет циклическое движение карусели при включении `mouseleave`. Если установлено значение `false`, наведение курсора на карусель не приостановит ее. На устройствах с сенсорным экраном, если установлено значение `"hover"`, цикл будет приостанавливаться `touchend`(после того, как пользователь завершит взаимодействие с каруселью) на два интервала, а затем автоматически возобновится. Это в дополнение к поведению мыши.
`ride`	строка, логическое значение	`false`	Если установлено значение `true`, автоматически воспроизводится карусель после того, как пользователь вручную прокрутит первый элемент. Если установлено значение `"carousel"`, карусель автоматически воспроизводится при загрузке.
`touch`	логический	`true`	Должна ли карусель поддерживать смахивание влево/вправо на устройствах с сенсорным экраном.
`wrap`	логический	`true`	Должна ли карусель вращаться непрерывно или делать резкие остановки.

Методы

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

Все методы API являются асинхронными и запускают переход . Они возвращаются к вызывающей стороне сразу после начала перехода, но до его завершения . Кроме того, вызов метода переходного компонента будет игнорироваться .

Дополнительную информацию см. в нашей документации по JavaScript .

Вы можете создать экземпляр карусели с помощью конструктора карусели, например, для инициализации с дополнительными параметрами и запуска цикла по элементам:

const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
  interval: 2000,
  wrap: false
})

Метод	Описание
`cycle`	Перебирает элементы карусели слева направо.
`dispose`	Уничтожает карусель элемента. (Удаляет сохраненные данные в элементе DOM)
`getInstance`	Статический метод, который позволяет вам получить экземпляр карусели, связанный с элементом DOM, вы можете использовать его следующим образом: `bootstrap.Carousel.getInstance(element)`.
`getOrCreateInstance`	Статический метод, который возвращает экземпляр карусели, связанный с элементом DOM, или создает новый, если он не был инициализирован. Вы можете использовать его следующим образом: `bootstrap.Carousel.getOrCreateInstance(element)`.
`next`	Переход к следующему элементу. Возвращает вызывающему объекту до того, как будет показан следующий элемент (например, до того, как `slid.bs.carousel`произойдет событие).
`nextWhenVisible`	Не переключайте карусель на следующую, если страница не видна или карусель или ее родитель не видны. Возвращает вызывающему объекту до того, как целевой элемент будет показан .
`pause`	Запрещает карусели циклически перемещаться по элементам.
`prev`	Переход к предыдущему элементу. Возвращает вызывающему объекту до того, как был показан предыдущий элемент (например, до того, как произошло `slid.bs.carousel`событие).
`to`	Циклически перемещает карусель к определенному кадру (на основе 0, подобно массиву). Возвращает вызывающему объекту до того, как целевой элемент будет показан (например, до того, как `slid.bs.carousel`произойдет событие).

События

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

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

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

Тип события	Описание
`slid.bs.carousel`	Запускается, когда карусель завершила переход слайдов.
`slide.bs.carousel`	Срабатывает немедленно при `slide`вызове метода экземпляра.

const myCarousel = document.getElementById('myCarousel')

myCarousel.addEventListener('slide.bs.carousel', event => {
  // do something...
})

Карусель

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

Пример

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

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

С индикаторами

С подписями

Метка первого слайда

Метка второго слайда

Метка третьего слайда

Кроссфейд

Индивидуальный .carousel-itemинтервал

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

Темный вариант

Метка первого слайда

Метка второго слайда

Метка третьего слайда

Пользовательский переход

Сасс

Переменные

Применение

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

Через JavaScript

Опции

Методы

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

События

Индивидуальный `.carousel-item`интервал