Компонент слайд-шоу для цикличного повторения элементов - карусель изображения или текстовые слайды.
Как это работает
«Карусель» - это слайд-шоу для отображения серии содержимого, созданная на основе CSS 3D-трансформаций и немного на JS. Она работает с текстом, изображениями или обычной разметкой. Она также поддерживает кнопки “next/prev”.
В браузерах с поддержкой API видимости страниц элементы карусели не будут сменяться, когда страница невидима пользователю (например, когда вкладка браузера неактивна, или окно браузера «минимизировано» - кнопка «квадратик» слева от крестика «закрыть браузер», и т.д.).
Эффект анимации этого компонента зависит от медиа запроса prefers-reduced-motion. Смотрите раздел о редукции анимаций.
Пожалуйста, знайте, что вложенные карусели не поддерживаются, а карусели в целом не очень желательны «стандартам доступности».
Карусель не подстраивает автоматически размер содержимого слайдов. Поэтому вам могут понадобиться дополнительные утилиты для придания их содержимому нужного размера. Пока карусели поддерживают кнопки «prev/next», их не надо добавлять явно. Добавьте и настраивайте их самостоятельно.
Класс .active добавляют к одному из слайдов, иначе карусель не будет видно. Также для внедрения элементов управления необходимо задать уникальный ID элементу класса .carousel, особенно если у вас много каруселей на одной странице. Элементы управления и индикаторы должны иметь атрибут data-target (или href для <a>), который совпадает с ID элемента класса .carousel.
Только слайды
Вот пример карусели, где есть только слайды. Заметьте присутствие классов .d-block и .w-100, отменяющих дефолтное выравнивание изображений в браузерах у изображений карусели.
Необходимо добавлять класс .active в один из слайдов, иначе карусель не будет видна.
С надписями
Добавляйте надписи в ваши слайды с помощью добавления элемента класса .carousel-caption в любой элемент карусели класса .carousel-item. Надписи легко скрыть на меньших устройствах, используя утилиты отображения. Они спрятаны первоначально с помощью класса .d-none и показываем их опять на средних устройствах с помощью класса .d-md-block.
First slide label
Nulla vitae elit libero, a pharetra augue mollis interdum.
Second slide label
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Third slide label
Praesent commodo cursus magna, vel scelerisque nisl consectetur.
Атрибут data-slide принимает значения prev или next, которые изменяют позицию слайда относительно его текущей позиции. Или используйте data-slide-to для перехода на слайд с индексом, например, 2: data-slide-to="2", индексы слайдов начинаются с 0.
Атрибут data-ride="carousel" используется для создания анимации карусели. Его нельзя сочетать с явной инициализацией карусели через JavaScript.
Через JavaScript
Вызывайте карусель вручную:
Параметры
Параметры можно передавать через атрибуты или JavaScript. Для использования атрибутов добавьте название параметра в data-, например: data-interval="".
Имя
Тип
По умолч.
Описание
interval
число
5000
Время задержки между автоматической сменой слайда. Если false – карусель не будет автоматически сменять слайды.
keyboard
boolean
true
Будет ли карусель реагировать на события клавиатуры.
pause
строка | boolean
"hover"
Если стоит "hover" – смена слайдов тормозится по mouseenter, и начинает смену по mouseleave. Если false – наведение на карусель не остановит смену слайдов.
Устройства, активируемые касанием: "hover" – пауза при touchend (когда пользователь закончил взаимодействие с каруселью) на два интервала, потом опять смена слайдов. Заметьте, что это поведение – дополнение к описанному выше поведению мыши.
ride
строка
false
Автосмена слайдов карусели после первой ручной смены слайда юзером. Если carousel – автосмена включается после загрузки.
wrap
boolean
true
Должна ли карусель сменяться плавно или дискретно.
touch
boolean
true
Карусель должна поддерживать взаимодействие влево / вправо на сенсорных устройствах.
Методы
Асинхронные методы и переходы
Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
Инициализирует объект object карусели с установленными параметрами и начинает смену слайдов.
.carousel('cycle')
Сменяет слайды карусели слева направо.
.carousel('pause')
Останавливает смену слайдов.
.carousel(number)
Прокручивает слайды до определенного момента (основано на 0, схоже с рядами). Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel).
.carousel('prev')
Прокручивает к предыдущему слайду. Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel).
.carousel('next')
К следующему слайду. Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel).
.carousel('dispose')
Уничтожает карусель элемента.
События
Карусель в Bootstrap располагает 2-мя событиями для применения функциональности. У обоих событий есть следующие дополнительные свойства:
direction: Направление, в котором движутся слайды ("left" или "right").
relatedTarget: Элемент DOM, который движется на место «пролистанного» слайда.
from: Индекс текущего слайда
to: Индекс следующего слайда
Все события карусели запускаются непосредственно в карусель (т.е. в <div class="carousel">).
Тип события
Описание
slide.bs.carousel
Это событие запускается немедленно, когда вызван метод slide.
slid.bs.carousel
Это событие запускается, когда карусель завершила переходы своих слайдов.
Изменение продолжительности перехода
Длительность перехода .carousel-item можно изменять в переменной Sass $carousel-transition перед компиляцией, или обычным CSS (при использовании компилированного CSS). Если применяются множественные переходы, удостоверьтесь, что переход трансформации задан первым (например: transition: transform 2s ease, opacity .5s ease-out).