JS Carousel (carousel.js)
Плагин Carousel является компонентом для езды на велосипеде через элементы, как карусель (слайд-шоу).
Для учебника о карусели, читайте нашу Bootstrap Carousel Учебник .
Примечание: Карусели не поддерживаются должным образом в Internet Explorer 9 и более ранних версий (потому что они используют CSS3 переходов и анимации для достижения эффекта слайд).
Классы Carousel плагинов
| Класс | Описание |
|---|---|
| .carousel | Создает карусель |
| .slide | Добавляет переход CSS и эффект анимации при скольжении от одного элемента к другому. Удалить этот класс, если вы не хотите этого эффекта |
| .carousel-indicators | Добавляет индикаторы для каруселью. Эти маленькие точки в нижней части каждого слайда (что указывает, сколько скользит есть в карусели, и которые скользят пользователь в настоящее время просмотра) |
| .carousel-inner | Добавляет слайды к карусели |
| .item | Определяет содержание каждого слайда |
| .left carousel-control | Добавляет левую кнопку на карусели, которая позволяет пользователю вернуться между слайдами |
| .right carousel-control | Добавляет правую кнопку на карусели, которая позволяет пользователю идти вперед между слайдами |
| .carousel-caption | Определяет заголовок для карусельного |
Via data-* Атрибуты
data-ride="carousel" атрибут активирует каруселью.
data-slide и data-slide-to атрибутов указывает , которые скользят пойти.
data-slide атрибут принимает два значения: или пред рядом, в то время как 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");
});
Попробуй сам " Carousel Опции
Параметры могут быть переданы с помощью атрибутов данных или JavaScript. Для атрибутов данных, добавьте имя параметра к данные-, так как в данных интервала = "".
| имя | Тип | По умолчанию | Описание | Попробуй |
|---|---|---|---|---|
| interval | number, or the boolean false | 5000 | Определяет задержку (в миллисекундах) между каждого слайда. Примечание: Установить интервал до ложного , чтобы остановить элементы из автоматического скольжения | Использование JS с использованием данных |
| pause | string, or the boolean false | "hover" | Приостановка карусель от прохождения через следующий слайд, когда указатель мыши входит в карусель, и возобновляет скольжение, когда указатель мыши покидает карусель Примечание: Установите паузу , чтобы ложная , чтобы остановить возможность сделать паузу при наведении курсора мыши | Использование JS с использованием данных |
| wrap | boolean | true | Определяет, должен ли карусель пройти через все слайды непрерывно, или остановится на последнем слайде
| Использование JS с использованием данных |
Carousel Методы
В следующей таблице перечислены все доступные методы карусели.
| метод | Описание | Попробуй |
|---|---|---|
| .carousel( options ) | Активизирует карусель с опцией. См варианты выше для допустимых значений | Попробуй |
| .carousel("cycle") | Проходит через пункты карусельных слева направо | Попробуй |
| .carousel("pause") | Останавливает карусель от прохождения пунктов | Попробуй |
| .carousel(number) | Переход к указанному элементу (начиная с нуля: первый элемент 0, второй пункт 1, и т.п ..) | Попробуй |
| .carousel("prev") | Переход к предыдущему пункту | Попробуй |
| .carousel("next") | Переход к следующему пункту | Попробуй |
Carousel События
В следующей таблице перечислены все доступные события карусели.
| Мероприятие | Описание | Попробуй |
|---|---|---|
| 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>Beatiful
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>Beatiful
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>
Попробуй сам "