Создание слайдера используя twitter bootstrap 3

  • CSS
  • 16,336
  • 0
  • 0
  • 0
  • 3 года назад

Twitter Bootstrap 3 один из лучших CSS фреймворков для разработки и дизайна систем управления содержимым. С помощью него с лёгкостью можно создавать блоги или страницы портфолио используя систему сеток Twitter Bootstrap (grid layout). В основе многих систем CMS есть базовый компонент “Слайдер” (Carousel), в основном - это последовательное автоматическое отображение изображений, но слайдер может быть каким-угодно: он может отображать последние выполненные проекты, отзывы ваших клиентов, описание специальных предложений, ссылки на новости или последние статьи из вашего блога. В этой статье, мы изучим то, как создать слайдер используя Twitter Bootstrap 3 Carousel компонент.

Введение в компонент Twitter Bootstrap 3 Carousel

Разметка для компонента карусели выглядит следующим образом:

~~~{.html}


Из кода выше, мы понимаем, что слайдер в Bootstrap 3  делится на несколько основных частей:

* Индикаторы
* Контент слайдера
* Контролы управления

Для установки элемента `div` в качестве слайдера, мы добавим к нему классы `carousel` и `slide`. Класс `carousel` создаёт эффект “карусели”, т.е. изменение слайдов по кругу. Класс `slide` добавляет анимацию в виде выезжающего справа или слева слайда. Индикаторы - это маленькие кружочки расположение внизу по-центру слайдера, они определяют текущую позицию слайда и количество всех слайдов. Индикаторы объявляются с помощью упорядоченного списка.

~~~{.html}
<ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

Упорядоченный список имеет класс carousel-indicators, который делает дочерние элементы маленькими кружочками. Каждый li элемент должен иметь аттрибут data-target со значением id родительского контейнера. Также он должен иметь атрибут data-slide-to с уникальным целочисленным значением для увеличения порядка (позиции) и начинаться значение должно с “0”. Содержимое слайда является основной частью слайдера. Именно в этом пространстве мы разместим наш контент слайдера. Содержимое слайдера определяется использованием класса carousel-inner. Этот элемент div может иметь неограниченное количество вложенных элементов div. Первый элемент должен быть активным по умолчанию, поэтому добавим класс active.

~~~{.html}


Каждый элемент с классом `item` имеет две подсекции: `image` и `carousel-caption`. Изображение используется в качестве заднего фона для слайда. Элемент с `carousel-caption` позиционируется поверх изображения и используется в качестве заголовка для слайда. Внутри `carousel-caption` вы можете разместить либо элемент <h3></h3> или элемент <p></p> или даже оба. Контролы - это правая и левая стрелки, которые используются для смены слайда вручную.

~~~{.html}
<!-- Контролы -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

Там должно быть два элемента: по одному для каждой стрелки. Первый элемент будет иметь элемент span с классами glyphicon glyphicon-chevron-left, которые являются иконкой левой стрелки, и второй элемент будет иметь классы glyphicon glyphicon-chevron-right, которые являются правой стрелкой. Теперь в Bootstrap для отображения иконок используются шрифты вместо изображений.

Это всё! Вы успешно создали слайдер для вашего сайта. Плюс, вы не написали ни строчки кода на JavaScript, bootstrap.js сделал это за вас.

Опции карусели

Для дополнительной настройки слайдера можно добавить несколько data-* атрибутов к родительскому контейнеру карусели.

  • data-interval используется для указания промежутка по времени между слайдами. Он принимает число в качестве значения и число должно быть в миллисекундах.

  • data-pause используется, чтобы определить при каком событии будет возникать пауза в слайдере. Если значение “hover” то слайдинг останавливается, когда мышь находится на слайдере.

  • data-wrap является булевым атрибутом и позволяет установить будет ли заново начинаться слайдинг, если достигнут конец слайдов.

Для любителей JQuery

Если вы любите использовать jQuery и data-* атрибуты, то Bootstrap позволяет использовать инициализацию через JavaScript! Чтобы сделать из элемента div карусель, вы должны написать следующий код:

~~~{.javascript} $('.carousel').carousel()


Опции для карусели должны быть установлены путём передачи JSON объекта. Например:

~~~{.javascript}
$('.carousel').carousel({
  interval: 2000,
  pause: “hover”,
  wrap: true
});

Вы также можете вручную вызывать события слайдера используя нижеприведённый код:

  • .carousel('pause') // поставить на паузу
  • .carousel('cycle') // переключать по очереди слайды
  • .carousel(2) // принудительно отобразить третий слайд в слайдере
  • .carousel('prev') // показать предыдущий слайд
  • .carousel(‘next’) // показать следующий слайд в слайдере

Приведенные выше методы могут быть вызваны из любого JavaScript кода для манипулирования нормальной работой слайдера. Я нахожу prev и next методы очень полезными, тогда когда хочу показать собственные кнопки вместо стрелок. Особенно, когда они находятся за пределами разметки карусели.

Заключение

Надеюсь, для вас было полезно узнать как создавать слайдер без написания тысяч строк кода на JavaScript. Я думаю, при правильном использовании, javascript компоненты Twitter Bootstrap окажутся неотъемлемой частью процесса вашей разработки. Они, безусловно, увеличат скорость разработки. Самое главное, они являются кроссбраузерными, так что вам не придется рвать на себе волосы, чтобы заставить их работать в старых браузерах.

Комментарии

0