Карусель
Компонент слайд-шоу для цикличного повторения элементов - карусель изображений или текстовых слайдов.
Как это работает
«Карусель» - это слайд-шоу для отображения серии содержимого, созданная на основе CSS 3D-трансформаций и немного на JavaScript. Она работает с текстом, изображениями или обычной разметкой. Она также поддерживает кнопки “next/prev”.
В браузерах с поддержкой API видимости страниц элементы карусели не будут сменяться, когда страница невидима пользователю (например, когда вкладка браузера неактивна, или окно браузера «минимизировано» - кнопка «квадратик» слева от крестика «закрыть браузер», и т.д.).
prefers-reduced-motion
. Смотрите раздел о редукции анимаций.
Учтите, что вложенные карусели не поддерживаются, а карусели в целом не очень желательны «стандартам доступности».
Пример
Карусель не подстраивает автоматически размер содержимого слайдов. Поэтому вам могут понадобиться дополнительные утилиты для придания их содержимому нужного размера. Пока карусели поддерживают кнопки «prev/next», их не надо добавлять явно. Добавьте и настраивайте их самостоятельно.
Класс .active
добавляют к одному из слайдов, иначе карусель не будет видно. Также для внедрения элементов управления необходимо задать уникальный ID элементу класса .carousel
, особенно если у вас много каруселей на одной странице. Элементы управления и индикаторы должны иметь атрибут data-target
(или href
для <a>
), который совпадает с ID элемента класса .carousel
.
Задавайте уникальный id классу .carousel
для возможности гибкого управления, особенно если вы используете много каруселей на странице.
Только слайды
Вот пример карусели, где есть только слайды. Заметьте присутствие классов .d-block
и .w-100
, отменяющих дефолтное выравнивание изображений в браузерах у изображений карусели.
<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>
С органами управления
Добавляет кнопки prev/next:
<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>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
С индикаторами
Вы также можете добавить индикаторы к карусели, наряду с органами управления.
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-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>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
С надписями
Добавляйте надписи в ваши слайды с помощью добавления элемента класса .carousel-caption
в любой элемент карусели класса .carousel-item
. Надписи легко скрыть на меньших устройствах, используя утилиты отображения элементов. Они спрятаны первоначально с помощью класса .d-none
и показываем их опять на средних устройствах с помощью класса .d-md-block
.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Склейка
Добавьте .carousel-fade
в вашу карусель для анимации слайдов с постепенным переходом на следующий слайд.
<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>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Индивидуальный интервал .carousel-item
Добавьте data-interval=""
к элементу .carousel-item
, чтобы изменить время задержки между автоматическим циклическим переходом к следующему элементу.
<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>
<a class="carousel-control-prev" href="#carouselExampleInterval" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleInterval" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Темный вариант
Добавьте .carousel-dark
к .carousel
для отображения более темных элементов управления, индикаторов и подписей. По умолчанию элементы управления инвертированы и смотрятся более темными по сравнению с их белой заливкой благодаря свойству CSS filter
. Заголовки и элементы управления имеют дополнительные Sass переменные, которые настраивают цвет color
и цвет фона background-color
.
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
</ol>
<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>Nulla vitae elit libero, a pharetra augue mollis interdum.</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleDark" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleDark" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Использование
Через атрибуты
Атрибут data-slide
принимает значения prev
или next
, которые изменяют позицию слайда относительно его текущей позиции. Или используйте data-slide-to
для перехода на слайд с индексом, например, 2: data-slide-to="2"
, индексы слайдов начинаются с 0
.
Атрибут data-ride="carousel"
используется для создания анимации карусели. Если вы не используете data-ride="carousel"
для инициализации карусели, вам придется инициализировать ее самостоятельно. Его нельзя сочетать с явной инициализацией карусели через JavaScript.
Через JavaScript
Вызывайте карусель вручную:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
Параметры
Параметры можно передавать через атрибуты или JavaScript. Для использования атрибутов добавьте название параметра в data-
, например: data-interval=""
.
Имя | Тип | По умолч. | Описание |
---|---|---|---|
interval |
number | 5000 |
Время задержки между автоматической сменой слайда. Если false – карусель не будет автоматически сменять слайды. |
keyboard |
boolean | true |
Будет ли карусель реагировать на события клавиатуры. |
pause |
string | boolean | "hover" |
Если установлено значение Устройства, активируемые касанием: |
slide |
string | boolean | false |
Автоматически отображает карусель после того, как пользователь вручную перебирает первый элемент. Если "карусель", автоматически воспроизводит карусель при загрузке. |
wrap |
boolean | true |
Должна ли карусель сменяться плавно или дискретно. |
touch |
boolean | true |
Карусель должна поддерживать взаимодействие влево / вправо на сенсорных устройствах. |
Методы
Асинхронные методы и переходы
Все методы API асинхронны и запускают переход. Они возвращаются функции, вызвавшей их, с началом перехода, но до его конца. Плюс, вызов метода к компоненту, выполняющему переход, будет проигнорирован.
Вы можете создать экземпляр карусели с помощью конструктора карусели, например, для инициализации с дополнительными параметрами и начала циклического перебора элементов:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: false
})
Метод | Описание |
---|---|
cycle |
Сменяет слайды карусели слева направо. |
pause |
Останавливает смену слайдов. |
prev |
Прокручивает к предыдущему слайду. Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel ). |
next |
К следующему слайду. Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel ). |
nextWhenVisible |
Циклически переключает карусель на определенный кадр (на основе 0, аналогично массиву). Возвращает значение функции-вызову до того, как элемент-«цель» показан (т.е. до того, как возникает событие slid.bs.carousel ). |
to |
Циклически переключает карусель на определенный кадр (на основе 0, аналогично массиву). Возврат к вызывающей стороне до тех пор, пока будет показан целевой элемент (например, до того, как произойдет событие slid.bs.carousel ). |
dispose |
Уничтожает карусель элемента. |
getInstance |
Статический метод, позволяющий получить экземпляр карусели, связанный с элементом DOM. |
События
Класс карусели Bootstrap предоставляет два события для подключения к функциональности карусели. Оба события имеют следующие дополнительные свойства:
direction
: Направление, в котором движется карусель ("left"
или"right"
).relatedTarget
: Элемент DOM, который вставляется на место как активный элемент.from
: Индекс текущего элементаto
: Индекс следующего элемента
Все события карусели запускаются в самой карусели (т.е. в <div class="carousel">
).
Тип события | Описание |
---|---|
slide.bs.carousel |
Это событие запускается немедленно, когда вызван метод slide . |
slid.bs.carousel |
Это событие запускается, когда карусель завершила переходы своих слайдов. |
var myCarousel = document.getElementById('myCarousel')
myCarousel.addEventListener('slide.bs.carousel', function () {
// do something...
})
Изменение продолжительности перехода
Длительность перехода .carousel-item
можно изменять в переменной Sass $carousel-transition
перед компиляцией, или обычным CSS (при использовании компилированного CSS). Если применяются множественные переходы, удостоверьтесь, что переход трансформации задан первым (например: transition: transform 2s ease, opacity .5s ease-out
).