Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов
>
Рубрика:Bootstrap верстка

Слайдер для сайта на bootstrap в виде карусели. Нет ничего проще

 

Доброго времени суток, верные читатели и гости моего обучающего блога. Сегодня мы займемся разбором интересного и востребованного инструмента фреймворка. Среди разработчиков это называется Bootstrap карусель, а по документации – Bootstrap Carousel Plugin.

Для тех, кто до сих пор не знаком с названным элементом, я объясню, что это такое и для чего обычно используется, подробно расскажу о всех встроенных классах, атрибутах, опциях и методах, а напоследок покажу реализацию полноценного слайдера фотографий. Да-да, переходим к делу!

Первое знакомство с понятием галереи типа «Карусель»

Как и обещал, я написал вводную главу для тех, кто совершенно не имеет понятия, что такое слайдер «Карусель».

The Carousel Plugin – это определенный вид галереи со встроенным слайд-шоу, которое в свою очередь переключает изображения непрерывно по кругу.

Это напоминает карусель, которая крутится без остановки. Именно поэтому данный механизм и получил название «Карусель». Как вы догадались, перелистывание слайдов горизонтальное, не вертикальное.

Сферы применения

Конечно же базовой задачей использования слайдера была презентация фотографий или других графических файлов галереи. Однако на сегодняшний день сферы использования описываемого механизма несколько расширились.

Очень часто «Карусель» можно встретить на главных страницах интернет-магазинов, с помощью которых компании рекламируют новые поставки товаров, выгодные предложения или акционные услуги.

Карусель

Также я довольно часто замечал подобный инструмент на новостных сайтах, где свежие или горячие новости привлекали внимание читателей, переключаясь слайдером вверху веб-страницы.

Конечно же галереи типа «Карусель» по сей день используются художниками, фотографами, дизайнерами, специалистами сферы красоты и другими людьми для удобной и привлекательной презентации своих работ на страницах портфолио. И это только часть примеров использования изучаемого плагина.

Операция по изучению стратегически важных рычагов управления началась!

Чтобы умело и быстро создавать слайдеры, для начала нужно разобрать и запомнить встроенные в фреймворк классы. Их всего 8. Благодаря им вы сможете оперативно добавлять автоматическое переключение кадров, внедрять кнопки управления слайдами, производить настройку галереи под свои нужды, заполнять слайдер контентом и многое другое.

Класс Предназначение
carousel Создает сам слайдер «Карусель».
slide Добавляет эффект анимации и переходов во время переключения между слайдами. Если не указывать текущий класс, то красивое перелистывание кадров не работает. Класс не обязательный.
carousel-indicators Добавляет панель управления в виде небольших точек снизу каждого изображения, по которым можно быстро переходить на любую картинку. Также можно создать навигацию с миниатюрами.  Класс не обязательный.
carousel-inner Добавляет сами слайды в галерею.
carousel-caption Отвечает за подписи графических файлов. Можно включать по желанию.
item Определяет набор контента для каждого слайда.
Right / left carousel-control Добавляет правую и левую кнопки соответственно названию для переключения между кадрами.

Однако это еще не все. Без знаний важных атрибутов ваша карусель не «закрутится». Не волнуйтесь, вы легко все запомните, так как их всего 4.

Атрибут Описание
data-ride Активизирует слайдер нужного типа. В этом случае всегда стоит указывать значение «carousel».
data-slide Отвечает за переключение кадров вперед или назад. Этот атрибут используется для боковых кнопок управления «Вперед» и «Назад». Поэтому для каждой названной кнопки указывается значение «next» и «prev» соответственно.
data-slide-to Осуществляет переход на конкретный кадр по его номеру, который указывается в качестве значения.
data-target Определяет к какой «Карусели» применяется данный плагин. Он должен совпадать с идентификатором в блоке Carousel.
К примеру, если созданный вами контейнер имеет имя: <div id="myCarousel" class="carousel slide" data-ride="carousel">, то data-target="#myCarousel".

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

К тому же стоит заметить, что описываемый элемент должным образом не поддерживается в браузере Internet Explorer 9 и более ранних версиях.

Укрепим наши позиции!

Знание классов и атрибутов – это, бесспорно, важно. Однако помимо них желательно иметь представления и о существующих инструментах, используемых в JavaScript.

Так, благодаря встроенным методам и событиям можно значительно расширить возможности «Карусели» и оптимизировать ее управление.

Для начала вам стоит знать, что в этом случае всем руководит .carousel (). С его помощью в коде jQuery вызываются различные методы и устанавливаются опции.

Методы Описание
.carousel (options) Можно установить дополнительные опции:

·       interval – время переключения кадров. По умолчанию стоит 5000 милисекунд;

·       pause – возможность остановки анимации при наведении курсора на изображение;

·       wrap – опция бесконечного прокручивания слайдов.
.carousel (number) Производится переход на указанный элемент.
.carousel («pause») Останавливает перелистывание кадров.
.carousel («cycle») Указывает переключение слайдов по кругу слева направо.
.carousel («prev») Совершает переход на предыдущее изображение.
.carousel («next») Совершает переход на следующее изображение.

Также существует и 2 события.

Первое – это slide.bs.carousel, которое срабатывает до переключения с одного кадра на другой, а второе – slid.bs.carousel, которое срабатывает уже после смены старого слайда новым.

Пришло время создать собственный слайдер!

Слайдер карусели - мой пример

Я создал два слайдера с разным интервалом переключения изображений, в каждом из которых по 3 элемента. Картинки позиционируются по всей высоте области «Карусели».

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

<!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">
  <h2>Цветы</h2>
  <div id="Carousel1" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#Carousel1" data-slide-to="0" class="active"></li>
      <li data-target="#Carousel1" data-slide-to="1" ></li>
      <li data-target="#Carousel1" data-slide-to="2"></li>
    </ol>
 
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <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>
        </div>
      </div>
 
      <div class="item ">
        <img src="http://www.tacca.ru/images/M_images/flower/decozvet/zantadechia_aetiopica_003.jpg" alt="Flower1" width="460" height="345">
        <div class="carousel-caption">
          <h3>Каллы</h3>
        </div>
      </div>
 
      <div class="item">
        <img src="http://ezoscop.com/images/stories/magiya/gladiolus.jpg" alt="Flower2" width="460" height="345">
        <div class="carousel-caption">
          <h3>Гладиолусы</h3>
        </div>
      </div>
 
    </div>
    <a class="left carousel-control" href="#Carousel1" 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="#Carousel1" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
<h2>Машины</h2>
  <div id="Carousel2" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#Carousel2" data-slide-to="0" class="active"></li>
      <li data-target="#Carousel2" data-slide-to="1" ></li>
      <li data-target="#Carousel2" data-slide-to="2"></li>
    </ol>
 
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://www.rabstol.net/uploads/gallery/main/269/rabstol_net_ford_mustang_18.jpg" alt="Flower0" width="490" height="365">
        <div class="carousel-caption">
          <h3>Ford Mustang GT500</h3>
        </div>
      </div>
 
      <div class="item ">
 
        <div class="carousel-caption">
          <h3> BMW M9</h3>
        </div>
      </div>
 
      <div class="item">
        <img src="http://hi-news.ru/wp-content/uploads/2016/03/tesla-model-s-p90d-650x369.jpg" alt="Flower2" width="460" height="345">
        <div class="carousel-caption">
          <h3>Tesla Model S</h3>
        </div>
      </div>
 
    </div>
    <a class="left carousel-control" href="#Carousel2" 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="#Carousel2" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</br>
 
</div>
<script>
$(document).ready(function(){
    $("#Carousel2").carousel({interval: 3500});
    });
</script>
</body>
</html>

Получилось красиво, не правда ли? А все программируется очень просто! В этом и есть главное преимущество Bootstrap .

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

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

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