Bootstrap JS Карусель
JS Карусель (карусель. js)
Карусель плагин является компонентом для езды на велосипеде через элементы, как Карусель (слайд-шоу).
Для учебника о карусели, читайте наш Bootstrap Карусель учебник.
Примечание: Карусели не поддерживаются должным образом в Internet Explorer 9 и более ранних версиях (так как они используют переходы CSS3 и анимацию для достижения эффекта скольжения).
Классы карусель плагин
| Класс | Описание |
|---|---|
| .carousel | Создает Карусель |
| .slide | Добавляет CSS переход и эффект анимации при скольжении от одного элемента к следующему. Удалите этот класс, если вы не хотите, чтобы этот эффект |
| .carousel-indicators | Добавляет индикаторы для карусели. Это маленькие точки в нижней части каждого слайда (который показывает, сколько слайдов есть в карусели, и какой слайд пользователь в настоящее время просмотра) |
| .carousel-inner | Добавление слайдов в Карусель |
| .icon-next | Значок Юникода (стрелка вправо), используемый в карусели. Это часто используется вместо глификон |
| .icon-prev | Значок Юникода (стрелка, указывающая влево), используемый в карусели. Это часто используется вместо глификон |
| .item | Задает содержимое каждого слайда |
| .left carousel-control | Добавляет левую кнопку к карусели, которая позволяет пользователю вернуться между слайдами |
| .right carousel-control | Добавляет правую кнопку к карусели, которая позволяет пользователю идти вперед между слайдами |
| .carousel-caption | Задает заголовок для карусели |
Via data-* Attributes
data-ride="carousel" атрибут активирует Карусель.
data-slide И data-slide-to атрибуты указывает, к какому слайду следует перейти.
data-slide атрибут принимает два значения: prev Или
next, А
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="left carousel-control" href="#myCarousel" data-slide="prev">
Через JavaScript
Включить вручную с помощью:
Пример
// Activate Carousel
$("#myCarousel").carousel();
// Enable Carousel Indicators
$(".item").click(function(){
$("#myCarousel").carousel(1);
});
// Enable Carousel Controls
$(".left").click(function(){
$("#myCarousel").carousel("prev");
});
Параметры карусели
Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как в Data-Interval = "".
| Имя | Тип | По умолчанию | Описание | |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 |
Указывает задержку (в миллисекундах) между каждым слайдом. Примечание: установите интервал в false , чтобы остановить элементы от автоматического скольжения |
|
| pause | string, or the boolean false | "hover" | Приостанавливает Карусель от прохождения следующего слайда, когда указатель мыши входит в Карусель, и возобновляет скольжение, когда указатель мыши покидает Карусель Примечание: Установите для паузы значение false , чтобы остановить возможность паузы при наведении |
|
| wrap | boolean | true | Указывает, должна ли Карусель проходить через все слайды непрерывно или останавливаться на последнем слайде
|
Карусель методы
В следующей таблице перечислены все доступные методы карусели.
| Метод | Описание | |
|---|---|---|
| .carousel(options) | Активирует карусель с опцией. Приведенные выше параметры для допустимых значений | |
| .carousel("cycle") | Проходит через карусель пунктов слева направо | |
| .carousel("pause") | Останавливает Карусель от прохождения пунктов | |
| .carousel(number) | Переходит к указанному элементу (с нуля: первый элемент равен 0, второй элемент равен 1 и т. д.) | |
| .carousel("prev") | Переходит к предыдущему элементу | |
| .carousel("next") | Переходит к следующему элементу |
Карусель события
В следующей таблице перечислены все доступные события карусели.
| Событие | Описание | |
|---|---|---|
| slide.bs.carousel | Происходит, когда карусель собирается скользить от одного элемента к другому | |
| slid.bs.carousel | Происходит, когда карусель закончила скольжение от одного элемента к другому |
Другие примеры
Подписи к слайдам
Добавьте <div class="carousel-caption"> внутри каждого <div
class="item"> для того чтобы создать подпись для каждого скольжения:
Пример
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img_chania.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_chania2.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="img_flower.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
