Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

Создаем собственный слайдер на бутстрап за несколько простых шагов

Доброго времени суток всем желающим выучить что-то новенькое из элементов фреймворка 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>

Если же вы сторонник второго способа, то вместо первой части ссылки вам нужно вставить путь к файлу.

Теперь осталось внедрить в сайт слайдер. Для этого используйте свои полученные знания и прописывайте нужные куски кода по порядку:

  1. открытие общего блока, отвечающего за описываемый инструмент;
  2. блок для указания индикаторов управления;
  3. блок для самих слайдов;
  4. реализация боковых кнопок.

Исключаться из этого перечня может только второй и последний 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! До скорой встречи!

Пока-пока!

С уважением, Роман Чуешов


Прочитано: 358 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • gans

    Здраствуйте.

    Не получается на этом слайдере прокручивать еще и ссылки.

    если добавить в:

    Домашний

    Корзина свежих цветов привнесет уют в любой дом

    и так по разной ссылке в каждый class="carousel-caption" — то ссылки не работают, или работает последняя.

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

    21.12.2016 в 19:05
  • Лора

    Отличная статья, большое спасибо)

    вопрос

    на 4 кадре увеличивается высота блока с каруселью

    как это поправить?

    17.05.2017 в 12:44