Bootstrap 4 JS Carousel
Carousel CSS Classes
For a tutorial about Carousels, read our Bootstrap Carousel Tutorial.
| Класс | Описание |
|---|---|
.carousel |
Создает Карусель |
.carousel-indicators |
Добавляет индикаторы для карусели. Это маленькие точки в нижней части каждого слайда (который показывает, сколько слайдов есть в карусели, и какой слайд пользователь в настоящее время просмотра) |
.carousel-inner |
Добавление слайдов в Карусель |
.carousel-item |
Задает содержимое каждого слайда |
.carousel-control-prev |
Добавляет левую (предыдущую) кнопку к карусели, которая позволяет пользователю вернуться между слайдами |
.carousel-control-next |
Добавляет кнопку вправо (Next) к карусели, которая позволяет пользователю идти вперед между слайдами |
.carousel-control-prev-icon |
Используется вместе с. Карусель-управление-Предыдущая для создания "предыдущей" кнопки |
.carousel-control-next-icon |
Используется вместе с. Карусель-управление-Next для создания кнопки "Next" |
.carousel-caption |
Задает заголовок для карусели |
.slide |
Добавляет CSS переход и эффект анимации при скольжении от одного элемента к следующему. Удалите этот класс, если вы не хотите, чтобы этот эффект |
Via data-* Attributes
The data-ride="carousel" атрибут активирует Карусель.
The data-slide и data-slide-to атрибуты указывает, какой слайд, чтобы перейти к.
The data-slide атрибут принимает два значения: prev или
next, while
data-slide-to принять номера.
Пример
<!-- Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel Indicators -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- Carousel Controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
Через JavaScript
Включить вручную с помощью:
Пример
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".carousel-control-prev").click(function(){
$("#myCarousel").carousel("prev");
});
Параметры карусели
Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как в Data-Interval = "".
| Имя | Тип | По умолчанию | Описание | |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Указывает задержку (в миллисекундах) между каждым слайдом. Примечание: Установите интервал в значение false, чтобы остановить элементы от автоматического скольжения |
|
| keyboard | boolean | true | Указывает, должна ли Карусель реагировать на события клавиатуры:
|
|
| pause | string, or the boolean false | "hover" | Приостанавливает Карусель от прохождения следующего слайда, когда указатель мыши входит в Карусель, и возобновляет скольжение, когда указатель мыши покидает Карусель Note: Set pause to false to stop the ability to pause on hover |
|
| wrap | boolean | true | Указывает, должна ли Карусель проходить через все слайды непрерывно или останавливаться на последнем слайде
|
Карусель методы
В следующей таблице перечислены все доступные методы карусели.
| Метод | Описание | |
|---|---|---|
| .carousel(options) | Активирует карусель с опцией. Приведенные выше параметры для допустимых значений | |
| .carousel("cycle") | Проходит через карусель пунктов слева направо | |
| .carousel("pause") | Останавливает Карусель от прохождения пунктов | |
| .carousel(number) | Переходит к указанному элементу (с нуля: первый элемент равен 0, второй элемент равен 1 и т. д.) | |
| .carousel("prev") | Переходит к предыдущему элементу | |
| .carousel("next") | Переходит к следующему элементу | |
| .carousel("dispose") | Уничтожает Карусель |
Карусель события
В следующей таблице перечислены все доступные события карусели.
| Событие | Описание | |
|---|---|---|
| slide.bs.carousel | Происходит, когда карусель собирается скользить от одного элемента к другому | |
| slid.bs.carousel | Происходит, когда карусель закончила скольжение от одного элемента к другому |
События скольжения и скольжения также имеют дополнительные свойства:
| Property | Описание | |
|---|---|---|
| direction | Возвращает направление, в котором Карусель скользит (влево или вправо) | |
| relatedTarget | Возвращает элемент DOM, который перемещается на место в качестве активного элемента | |
| from | Возвращает индекс, из которого был предыдущий элемент, при переходе к следующему | |
| to | Возвращает индекс следующего элемента |