Карусель 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 и рассмотрим, как изменить эффект анимации при смене слайдов карусели.

Похожие записи: Bootstrap 4 Modal - модальное окно фреймворка Bootstrap 4 NavBar: адаптивное меню фреймворка Bootstrap 4 Grid: модульная сетка фреймворка Что нового в Bootstrap 4 и в чем отличие от Bootstrap 3?
Добавлено коментариев -  11
  • kot 18.07.2017 06:52

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

    Ответить
  • Andrew 20.02.2018 20:46

    как изменять стили кнопок prev і next?

    Ответить
    • Евгений 20.02.2018 20:57

      Здравствуйте. Изменять нужно сами стили, каких-то других вариантов, насколько я знаю, фреймворк не предоставляет.

      .carousel-control.left {
      	// Собственные стили
      }
      .carousel-control.right {
      	// Собственные стили
      }
      Ответить
  • Olga 25.02.2018 14:43

    Скопировала ваш код, и получила картинки, выстроенные вертикально в ряд. В чём засада?

    Ответить
    • Евгений 25.02.2018 14:52

      Здравствуйте, а вы файлы самого фреймворка подключили?

      Ответить
      • Александр 01.03.2018 03:02

        Всё подключено, но всё равно не работает.

        Ответить
        • Евгений 01.03.2018 11:59

          Такое может быть, если вы подключаете 4 версию бутстрапа, а статья была написана про 3, четвертой тогда еще не было.

          Ответить
  • Владислав 10.04.2018 19:38

    Скажите пожалуйста а как сделать на 5 слайдов карусель?

    Ответить
    • Евгений 11.04.2018 01:00

      Здравствуйте. Да хоть 25, добавляйте сколько вам нужно div с классом .item.

      <div class="carousel-inner">
      	<!-- Слайд 1 -->
      	<div class="item active">
      		<img src="..." alt="...">
      		<div class="carousel-caption">
      			...
      		</div>
      	</div>
      	<!-- Слайд 2 -->
      	<div class="item">
      		<img src="..." alt="...">
      			<div class="carousel-caption">
      			...
      		 </div>
      	</div>
          <!--И т.д.-->
      </div>

       

      Ответить
  • Никита 24.04.2018 12:32

    Возможно ли сделать карусель только для разрешений экранов до md, а после идет галерейка в стиле аля pinterest? Плагин цепляется только за нужные ему классы?

    Ответить
    • Евгений 24.04.2018 14:08

      Из коробки бутстрап такой возможности не дает. Самое простое решение будет таким, создаем два разных элемента, для маленьких разрешений элемент сразу ставим в display: none;, а на точке md показываем его и скрываем элемент для большого разрешения. При таком подходе к элементу для малого разрешения можно подключить любой неомходимый JS-плагин.

      Ответить

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

Нажимая на кнопку «Добавить», я даю согласие на обработку своих персональных данных в соответствии с политикой конфиденциальности