Доброго времени суток всем желающим выучить что-то новенькое из элементов фреймворка Bootstrap. Сегодняшней темой станет слайдер Бутстрап типа «Карусель». Это популярный элемент, который присутствует практически на каждом веб-сайте.
Поэтому я расскажу вам, как создать слайдер «Карусель», какие для этого понадобятся встроенные инструменты, как можно производить настройку параметров, а в конце статьи покажу реализацию конкретного примера. А теперь вперед за дело!
Все об инструментах Bootstrap Carousel Plugin
Галерея фотографий типа «Карусель» используется для презентации новых предложений, продукции, перечня действующих акций, удобного просмотра портфолио и т.д. Поэтому на сегодняшний день важно уметь работать с данным плагином под официальным названием Bootstrap Carousel Plugin.
Стоит сразу заметить, что описываемый элемент должным образом не поддерживается в браузере Internet Explorer 9 и более ранних версиях. Однако прекрасно работает в CMS (для WordPress, Joomla! и других движков выполнить подключение фреймворка достаточно просто).
Для того чтобы с легкостью оперировать всеми параметрами и быстро настраивать слайдер, вам необходимо изучить основные встроенные классы Бутстрапа 3.
| Класс | Предназначение |
| carousel | Создает сам слайдер «Карусель». |
| slide | Добавляет при помощи css эффект анимации и переходов во время переключения между слайдами. Класс не обязательный. |
| carousel-indicators | Добавляет так скажем панель управления в виде небольших точек снизу каждого изображения, по которым можно быстро переходить на любую картинку. Класс не обязательный. |
| carousel-inner | Добавляет сами слайды в галерею. |
| carousel-caption | Отвечает за подписи графических файлов. Можно включать по желанию. |
| item | Определяет набор контента для каждого слайда. |
| Right / left carousel-control | Добавляет правую и левую кнопки соответственно названию для переключения между кадрами. |
Помимо этого, стоит знать и другие особенности верстки подобных галерей.
Для начала, создание самого блока «Карусели» требует объявления id="myCarousel" для корректного функционирования последней.
В этом же div-е нужно прописать атрибут data-ride="carousel", который указывает, что загрузка анимации должна происходить сразу же вместе с загрузкой страницы.
Теперь перейдем к индикаторам. В каждом теге li стоит прописать парочку атрибутов: data-target, который указывает на идентификатор конкретной «Карусели», и data-slide-to, определяющий к какому номеру кадра стоит прейти.
Что касается кнопок, переключающих изображения вперед или назад, то для их реализации стоит прописать атрибут data-slide с ключевым словом либо «prev», либо «next».
Вот теперь вы знаете про базовые элементы фреймворка, благодаря которым можно определенным образом редактировать отображение слайдера. Естественно вы можете отключить автоматическое перелистывание кадров, подписи к изображениям или боковые кнопки.Альтернативные механизмы управления
Помимо использования встроенных классов в Bootstrap можно обратиться за помощью к JavaScript. Так, существует множество методов и опций в JS, которые реализуют все те же действия, только через инструмент $.carousel (). Среди них можно перечислить такие, как:
| Методы | Описание |
| .carousel (options) | Можно определить дополнительные опции, к примеру, время переключения кадров (interval), возможность остановки анимации при наведении курсора на изображение (pause) и опцию бесконечного прокручивания слайдов (wrap). |
| .carousel (number) | Производится переход на указанный элемент. |
| .carousel («pause») | Останавливает перелистывание кадров. |
| .carousel («cycle») | Указывает переключение слайдов по кругу слева направо. |
| .carousel («prev») | Совершает переход на предыдущее изображение. |
| .carousel («next») | Совершает переход на следующее изображение. |
Контрольный по знаниям
Ну а теперь пришло время проверить, как вы усвоили материал, и закрепить полученные знания. Для этого я опишу каждое действие, которое вам нужно будет совершить на пути к созданию «Карусели».
Для начала вам необходимо подключить требуемые скрипты и стили. Я предпочитаю способ подключения через хранилища CDN, но вы можете загрузить фреймворк на официальном сайте (http://getbootstrap.com/) и поместить скачанные файлы в корень каталога с проектом.
Если вы со мной солидарны, то в шапке документа прописываем:
1 2 3 | <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
Если же вы сторонник второго способа, то вместо первой части ссылки вам нужно вставить путь к файлу.
Теперь осталось внедрить в сайт слайдер. Для этого используйте свои полученные знания и прописывайте нужные куски кода по порядку:
- открытие общего блока, отвечающего за описываемый инструмент;
- блок для указания индикаторов управления;
- блок для самих слайдов;
- реализация боковых кнопок.
Исключаться из этого перечня может только второй и последний div-ы.
Теперь вы уж точно готовы к написанию программного кода.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!DOCTYPE html>
<html lang="en">
<head>
<title>Пример галереи "Карусель"</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<br>
/*Создаю основной блок*/
<div id="myCarousel" class="carousel slide" data-ride="carousel">
/*Указываю 4 индикатора в соответствии с количеством изображений*/
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" ></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
/*Заполняю слайды*/
<div class="carousel-inner" role="listbox">
<div class="item ">
<img src="http://mint.net.ua/wp-content/uploads/2015/08/5.jpg" alt="Flower0" width="490" height="365">
<div class="carousel-caption">
<h3>Романтичный</h3>
<p>Букет нежных роз для признания в любви</p>
</div>
</div>
<div class="item active">
<img src="http://s1.hvylya.net/wp-content/uploads/2016/02/buket-tsvetov.jpg" alt="Flower1" width="460" height="345">
<div class="carousel-caption">
<h3>Праздничный</h3>
<p>Яркий подарок для любого торжества</p>
</div>
</div>
<div class="item">
<img src="http://goloskarpat.info/images/doc/2/a/2a45fef-cvety-bukety-01.jpg" alt="Flower2" width="460" height="345">
<div class="carousel-caption">
<h3>Домашний</h3>
<p>Корзина свежих цветов привнесет уют в любой дом</p>
</div>
</div>
<div class="item">
<img src="http://cs5.livemaster.ru/storage/9b/aa/dd475be99a6e8cfc0c51767ccegj--svadebnyj-salon-buket-nevesty-iz-polevyh.jpg" alt="Flower" width="460" height="345">
<div class="carousel-caption">
<h3>Свадебный</h3>
<p>Нежная цветовая гамма подчеркнет значимость события</p>
</div>
</div>
</div>
/*Создаю боковые кнопки управления*/
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html> |
Надеюсь, вы нашли что-то полезное для себя в текущей публикации. Буду благодарен, если вы расскажете о моем ресурсе своим друзьям, а также вступите в ряды подписчиков. Желаю успехов в изучении фреймворка Bootstrap! До скорой встречи!
Пока-пока!
С уважением, Роман Чуешов
Здраствуйте.
Не получается на этом слайдере прокручивать еще и ссылки.
если добавить в:
Домашний
Корзина свежих цветов привнесет уют в любой дом
и так по разной ссылке в каждый class="carousel-caption" — то ссылки не работают, или работает последняя.
Вообщем не получается , как бы простая задача, разместить по одной ссылке на каждом слайде.
Отличная статья, большое спасибо)
вопрос
на 4 кадре увеличивается высота блока с каруселью
как это поправить?
как изменить индикаторы на цифры в кружке