Доброго времени суток, дорогой читатель! В статье «Слайдер заднего фона» я рассказал каким способом можно сделать карусель изображений на заднем фоне. В этой статье я хотел бы поделиться опытом в создании того же самого только с помощью популярного Bootstrap Carousel. Для ознакомления с этим слайдером давайте интегрируем его в наш сайт как обычный слайдер изображений. Но для начала Вам нужно подключить Twitter Bootstrap на Ваш сайт, как рассказано в статье «Bootstrap FrameWork». Отлично, приготовления сделаны, теперь приступим.

Слайдер изображений Bootstrap Carousel

Заходи на сайт Twitter Bootstrap за слайдером и забираем оттуда HTML код и редакируем под вид:

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="/images/background/1.jpg" alt="">
</div>
<div class="item">
<img src="/mages/background/2.jpg" alt="">
</div>
<div class="item">
<img src="/images/background/3.jpg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Будьте внимательнее с путем к изображениям. Измените на свои.

Если Вы хотите, чтобы картинки в карусели растягивались, добавьте class="col-xs-12" или "img-responsive" в тег <img>

Как бы со стандартным видом Bootstrap Carousel всё, осталось только подправить CSS стили под Ваш сайт.

Слайдер заднего фона Bootstrap Carousel

Чтобы подпилить слайдер до нужного — необходимо всего лишь изменить подачу изображения вида:

<div class="item"  style="height: 700px;">
<div style="background: url('/path/to/image.jpg');background-repeat: no-repeat;background-size: cover; height100%;"></div>
</div>
Все что написано в style можно перенести в отдельный класс.

И немаловажное — перенесите <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="7000" data-pause="false"></div> так, чтобы он «окутывал» необходимую область страницы.

Минус всего это — нам нужно явно указывать высоту области, где будет отображаться слайдер заднего фона, но если Вы хотите, чтобы Ваш слайдер покрывал всю высоту экрана, то здесь поможет JavaScript код:

<script>
$(document).ready(function(){
$('.item').css('height', $(window).height());
});
$(window).resize(function() {
$('.item').css('height', $(window).height());
});
</script>

Первый будет выполнятся при загрузке страницы, второй — при изменении экрана, что хорошо для устройств, которые умеют поворачивать свою область просмотра.

На этом ознакомление с Bootstrap Carousel завершено, пользуетесь и развивайтесь! Пример этого слайдера можно увидеть на главной странице, созданного мной сайта – Мастреская свадебного декора.

Если у Вас появились ко мне вопросы по данной статье, задавайте их в комментариях ниже.