Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18

Всем привет!
В сегодняшнем уроке вы научитесь создавать слайдер (карусель) для ваших сайтов на известном фреймворке Twitter Boostrap 3. Слайдер (карусель) – это циклическая смена изображений или текста, или проще говоря – слайд-шоу.
В Boostrap 3 есть подготовленный код со всеми необходимыми стилями. За 5 минут у вас на сайте будет готовый слайдер, плюс ко всему, еще и адаптивный.

<!-- Карусель -->
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- Индикаторы для карусели -->
<ol class="carousel-indicators">
<!-- Перейти к 0 слайду карусели с помощью соответствующего индекса data-slide-to="0" -->
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<!-- Перейти к 1 слайду карусели с помощью соответствующего индекса data-slide-to="1" -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<!-- Перейти к 2 слайду карусели с помощью соответствующего индекса data-slide-to="2" -->
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Слайды карусели -->
<div class="carousel-inner">
<!-- Слайды создаются с помощью контейнера с классом item, внутри которого помещается содержимое слайда -->
<div class="active item">
<img src="izobrazhenie.png">
<h2>Слайд №1</h2>
<div class="carousel-caption">
<h3>Заголовок 1 слайда</h3>
<p>Текст (описание) 1 слайда...</p>
</div>
</div>
<!-- Слайд №2 -->
<div class="item">
<img src="izobrazhenie.png">
<h2>Slide 2</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
</div>
</div>
<!-- Слайд №3 -->
<div class="item">
<img src="izobrazhenie.png">
<h2>Slide 3</h2>
<div class="carousel-caption">
<h3>Third slide label</h3>
<input type="submit" class="btn btn-primary" value="Регистрация">
</div>
</div>

<!-- сюда добавляем еще код слайдера-->

</div>
<!-- Навигация для карусели -->
<!-- Кнопка, осуществляющая переход на предыдущий слайд с помощью атрибута data-slide="prev" -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- Кнопка, осуществляющая переход на следующий слайд с помощью атрибута data-slide="next" -->
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

Чтобы добавить еще слайды, вам нужна строка №42, и после за комментированного текста «сюда добавляем еще код слайдера», вставляем вот такой код слайда:

<!-- Слайд №4 -->
<div class="item">
<img src="…">
<h2>Slide 4</h2>
<div class="carousel-caption">
<h3>Second slide label</h3>
<p>Aliquam sit amet gravida nibh, facilisis gravida odio.</p>
</div>
</div>

А также добавляете в строку №10 вот этот код:

<!-- Перейти к 3 слайду карусели с помощью соответствующего индекса data-slide-to="3" -->
<li data-target="#myCarousel" data-slide-to="3"></li>

Это нужно для вот этого:

Результат проделанной работы:

посмотреть демонстрацию

Можно добавить к слайдеру свои CSS стили (о том, как добавить свои стили я расскажу в конце курса):

h2{
margin: 0;
color: #666;
font-size: 52px;
font-family: "trebuchet ms", sans-serif;
}
.item{
background: #333;
text-align: center;
}

Вот и все, ничего сложного нет!
Удачи всем и жду вас на следующих уроках. Подписывайтесь на обновления блога.