Bootstrap карусель плагин
Карусель плагин
Карусель плагин является компонентом для езды на велосипеде через элементы, как Карусель (слайд-шоу).
Совет: Плагины могут быть включены в индивидуальном порядке (с помощью индивидуальной Bootstrap "Карусель. js" файл), или все сразу (с помощью "Bootstrap. js" или "Bootstrap. min. js").
Пример карусели
Примечание: Карусели не поддерживаются должным образом в Internet Explorer 9 и более ранних версиях (так как они используют переходы CSS3 и анимацию для достижения эффекта скольжения).
Как создать Карусель
В следующем примере показано, как создать базовую карусель:
Пример
<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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los
Angeles">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="item">
<img src="ny.jpg" alt="New
York">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></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> классе WITH .carousel-inner.
Содержимое каждого слайда определяется в <div> классе WITH .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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Chania">
<div
class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is
always so much fun!</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you,
Chicago!</p>
</div>
</div>
<div class="item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the
Big Apple!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Полный справочник по загрузочной карусели
Для полной справки всех вариантов карусели, методы и события, перейдите на наш Ссылка Bootstrap JS Карусель.
