Статьи

Главная › Новости

Карусель Bootstrap 3: примеры использования и стилизация

Опубликовано: 01.09.2018

Создаем CSS slider на весь экран

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

Дополнительная информация слайда 1

Дополнительная информация слайда 2

Дополнительная информация слайда 3

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

Слайдер для сайта. BxSlider

<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-код.

Джедай вёрстки #7. Часть 8: Адаптация шапки для мобильных устройств

В контейнере с классом 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; }

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

Заголовок 1

Дополнительная информация слайда 1

Какая-то кнопка

Заголовок 2

Дополнительная информация слайда 2

Какая-то кнопка

Заголовок 3

Дополнительная информация слайда 3

Какая-то кнопка

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

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

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