Carousel Plugin
Плагин Carousel является компонентом для езды на велосипеде через элементы, как карусель (слайд-шоу).
Совет: Плагины могут быть включены в индивидуальном порядке ( с использованием Bootstrap's отдельных "carousel.js" файлов), или все сразу ( с помощью "bootstrap.js" или "bootstrap.min.js" ).
Carousel Пример
Ханья
Атмосфера в Ханье имеет сенсорный Флоренции и Венеции.
Ханья
Атмосфера в Ханье имеет сенсорный Флоренции и Венеции.
Цветы
Beatiful цветы в Колимбари, Крит.
Цветы
Beatiful цветы в Колимбари, Крит.
Примечание: Карусели не поддерживаются должным образом в Internet Explorer 9 и более ранних версий (потому что они используют CSS3 переходов и анимации для достижения эффекта слайд).
Как создать Carousel
В следующем примере показано, как создать базовую карусель:
пример
<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>
<div
class="item">
<img src="img_chania2.jpg"
alt="Chania">
</div>
<div
class="item">
<img src="img_flower.jpg"
alt="Flower">
</div>
<div class="item">
<img src="img_flower2.jpg" alt="Flower">
</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>
Попробуй сам " Пример Разъяснения
Наружный <div> :
Карусели требуют использования идентификатор (в данном случае id="myCarousel" ) для управления карусельного функционировать должным образом.
class="carousel" указывает , что это <div> содержит карусель.
.slide Класс добавляет переходный CSS и эффект анимации, что делает элементы скольжения при показе нового элемента. Пропустите этот класс, если вы не хотите этого эффекта.
data-ride="carousel" атрибут сообщает Bootstrap , чтобы немедленно начать при анимации карусель загрузки страницы.
"Индикаторы" часть:
Индикаторы являются маленькие точки в нижней части каждого слайда (который указывает, сколько слайдов есть в карусели, и которые скользят пользователь в настоящее время просматривает).
Показатели указаны в упорядоченном списке с классом .carousel-indicators .
data-target атрибут указывает на идентификатор каруселью.
data-slide-to атрибут указывает , которые скользят идти, при нажатии на конкретной точке.
"Обертка для слайдов" части:
Слайды указаны в <div> с классом .carousel-inner .
Содержание каждого слайда определяется в <div> с классом .item . Это может быть текст или изображения.
.active Класс должен быть добавлен к одному из слайдов. В противном случае, карусель не будет видно.
"Левый и правый элементы управления" часть:
Этот код добавляет "влево" и "вправо" кнопки, которая позволяет пользователю вернуться назад и вперед между слайдами вручную.
data-slide атрибут принимает ключевые слова "prev" или "next" , который изменяет положение скольжения относительно его текущего положения.
Добавить подписей к слайдам
Добавить <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>
Попробуй сам " Полное Bootstrap Carousel Reference
Для полного ведения всех карусельных вариантов, методов и событий, перейдите на наш Bootstrap JS Carousel Reference .