Карусель Bootstrap: разбор и стилизация

Здравствуйте. Продолжаем разбирать фреймворк Bootstrap. Об установке и основах использования фреймворка я писал в посте «Как работать с Bootstrap». В этой статье рассмотрим слайдер, в бутстрапе он называется Carousel (Карусель). У карусели Bootstrap есть существенные плюсы по сравнению с другими: адаптивность под мобильные устройства, по умолчанию, если навести курсор мыши на карусель, то смена слайдов останавливается, пока пользователь не уберет с нее курсор мыши, в слайды можно помещать любой HTML-код. Слайдер, предоставленный фреймворком, уже готов к использованиюи в большинстве случаев не требует существенного редактирования.

HTML-код слайдера выглядит вот так:

<div id="testCarousel" class="carousel slide" data-ride="carousel">
	<!-- Индикаторы карусели -->
	<ol class="carousel-indicators">
		<!-- Перейти к слайду №0 с помощью соответствующего атрибута с индексом data-slide-to="0" -->
		<li data-target="#testCarousel" data-slide-to="0" class="active"></li>
		<!-- Перейти к слайду №1 с помощью соответствующего индекса data-slide-to="1" -->
		<li data-target="#testCarousel" data-slide-to="1"></li>
		<!-- Перейти к слайду №1 с помощью соответствующего индекса data-slide-to="2" -->
		<li data-target="#testCarousel" data-slide-to="2"></li>
	</ol>

	<!-- Слайды карусели -->
	<div class="carousel-inner">
		<!-- Слайд 1 -->
		<div class="item active">
			<img src="img/carousel-bootstrap-slide1.jpg" alt="...">
			<div class="carousel-caption">
				Дополнительная информация слайда 1
			</div>
		</div>
		<!-- Слайд 2 -->
		<div class="item">
			<img src="img/carousel-bootstrap-slide2.jpg" alt="...">
			<div class="carousel-caption">
				Дополнительная информация слайда 2
			</div>
		</div>
		<!-- Слайд 3 -->
		<div class="item">
			<img src="img/carousel-bootstrap-slide3.jpg" alt="...">
			<div class="carousel-caption">
				Дополнительная информация слайда 3
			</div>
		</div>
	</div>

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

Для данного примера я не писал стили CSS вообще, взял только HTML-код из документации официального сайта фреймворка Bootstrap «getbootstrap.com» и немного поправил. Для карусели поменял идентификатор «id» на свой «testCarousel». Стоит обратить внимание, что «id» карусели передается в индикаторы и стрелки навигации. Давайте подробнее разберем данный HTML-код.

В контейнере с классом «item» содержится основной контент слайда, это может быть просто картинка и все, а может быть любой набор HTML-тегов вместе с изображением или без него. Таких контейнеров может быть много, но их количество должно совпадать с количеством индикаторов, если индикаторы используются в карусели. Контейнер с классом «carousel-caption» предназначен для дополнительных записей, причем помещенный в него контент, будет автоматически выравниваться и форматироваться.

Из  HTML-кода карусели можно убрать все лишнее и оставить только необходимое, например: убрать индикаторы и оставить только стрелочки навигации или наоборот, в слайде – убрать дополнительное описание и оставить только картинку или убрать картинку, задать фон и оставить текст с какой-нибудь кнопкой.

Класс «active» определяет какой слайд будет показан первым, по умолчанию он присваивается первому индикатору и слайду. Если есть необходимость изменить первый отображаемый слайд, но при этом не меняя местами сами блоки слайдов, то нужно присвоить класс «active» и индикатору, и слайду, не нарушая последовательности. Важно помнить, что нумерация индикаторов начинается с нуля, то есть по счету слайд и индикатор будет, например, четвертым, а значение «data-slide-to» у индикатора будет 3.

В навигации карусели все еще проще. К каждой ссылке присваивается свой класс, кнопка, ведущая к предыдущему классу, имеет класс «left» и атрибут «data-slide» со значением «prev», а кнопка, ведущая к следующему слайду, класс «right» и атрибут «data-slide» со значением «next». Внутри ссылок в тегах «span» находятся сами стрелочки (шевроны) влево и вправо, эти стрелки взяты из иконочного шрифта Bootstrap.

Стилизация слайдера Bootstrap

Стилизовать карусель можно как угодно. Возьмем предыдущий пример, уберем картинку и индикаторы, добавим заголовок и кнопку, набросаем собственные стили CSS.

После внесения правок HTML-код стал таким.

<div id="testCarousel" class="carousel slide" data-ride="carousel">
	<!-- Слайды карусели -->
	<div class="carousel-inner">
		<!-- Слайд 1 -->
		<div class="item active">
			<h2>Заголовок 1</h2>
			<p>Дополнительная информация слайда 1</p>
			<button class="btn btn-primary btn-lg">Какая-то кнопка</button>
		</div>
		<!-- Слайд 2 -->
		<div class="item">
			<h2>Заголовок 2</h2>
			<p>Дополнительная информация слайда 2</p>
			<button class="btn btn-success btn-lg">Какая-то кнопка</button>
		</div>
		<!-- Слайд 3 -->
		<div class="item">
			<h2>Заголовок 3</h2>
			<p>Дополнительная информация слайда 3</p>
			<button class="btn btn-default btn-lg">Какая-то кнопка</button>
		</div>
	</div>

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

К этому коду добавим собственные стили.

.carousel .item{
	background: #333;    
  text-align: center;
  height: 300px !important;
}
.carousel h2{
	color: #fff;
	margin: 0;
  padding-top: 50px;
  font-size: 48px;
}
.carousel p{
	color: #666;
	font-weight: bold;
	font-size: 16px;
	margin-top: 30px;
	margin-bottom: 40px;
}

После произведенных изменений карусель выглядит вот так.

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

Фреймворк дает возможность изменять дефоллтные опции карусели с помощью JavaScript. Все методы, параметры и события описаны в документации на официальном сайте.

На этом буду заканчивать, а в следующей статье продолжим разбирать карусель Bootstrap и рассмотрим, как изменить эффект анимации при смене слайдов карусели.

Добавлено коментариев  -    1

  1. kot

    Это было интересно, сейчас попробую использовать

Добавить комментарий