Создание javascript слайдера на Twitter Bootstrap 3

Twitter Bootstrap 3 является лучшей CSS библиотекой для создания и разработки CMS. Становится легко создать блог, портфолио или личную страничку использую сетку от Twitter Bootstrap 3. Большинство CMS имеют одну общую штуковину под названием слайдер. Принцип работы слайдера основан на последовательной автоматизированной смене изображений, слайдер может быть использован для: показа ваших последних проектов, описание специальных предложений, как ссылки на новостные блоки, или для показа последних сообщений вашего блога.

В этой статье будет показано, как создать слайдер, используя javascript компонент от Twitter Bootstrap 3 Carousel.

Понимание компонента Twitter Bootstrap 3 Carousel

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

HTML

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic"
        role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic"
        role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

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

1. Индикаторы
2. Контент слайдера
3. Элементы управления (контроль)

Посмотрите на demo, где слайдер создается на основе структуры Bootstrap 3.

Любой div можно использовать как слайдер, для этого примените классы carousel и slide. Класс carousel определяет элемент в качестве элемента с особенностью карусели (элемент обертка для слайдера). Класс slide применяется для добавления слайд-эффекта слайдера, в процессе смены слайдов.

Индикаторы это небольшие круги расположенные внизу по центру слайдера и указывающие на позицию текущего слайда и количество всех слайдов. Индикаторы объявляются через упорядоченный список (тег ol).

HTML

  <!-- Indicators -->
  <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>

Элементу ol назначается класс carousel-indicators, что делает дочерние элементы похожими на небольшие окружности. Каждый элемент li должен иметь атрибут data-target со значением равным id родительского блока карусели. Также они должны иметь атрибут data-slide-to с уникальным значением, причем значение должно инкрементироваться, начиная с 0.

Контент слайдера является основной частью слайдера. Область с контентом определяется через класс carousel-inner. Этот блок может иметь неограниченной количество div элементов. Первый div должен иметь класс active.

HTML

  <div class="carousel-inner">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
        ...
  </div>

Каждый item имеет две подсекции: image и carousel-caption. Изображение занимает полную ширину области с контентом в слайдере. carousel-caption (область с дополнительной информацией о слайде) расположена над изображением. В блок carousel-caption можно поместить обычные элементы разметки, например, такие как p или h3.

Элементы контроля (стрелки вперед и назад) позволяют вручную менять положение слайдов.

HTML

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic"
        role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic"
        role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>

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

На этом все! Вы успешно создали слайдер для вашего сайта. Плюс, для работы слайдера мы не написали ни одной строки javascript. Bootstrap.js делает все автоматически.

Опции Carousel

Опции могут быть передана через data- атрибуты или javascript. Для data атрибутов просто добавьте имя опции за data- и укажите нужное значение, например data-interval = ““.

1. data-interval указываем временной интервал (в миллисекундах) между слайдами.
2. data-pause используется, когда необходимо остановить активность слайдера. Если значение hover слайды не будут крутиться, когда мышка расположена над слайдом.
3. data-wrap логический атрибут, который указывает на то, следует ли начинать прокрутку заново при прохождении полного цикла слайдов.

Настройка carousel через Jquery

Если вам удобнее использовать JQuery, то Bootstrap позволяет вам инициализировать слайдер через javascript.

Чтобы использовать div как карусель, вам потребуется следующий сниппет:

jQuery

$('.carousel').carousel()

Опции плагину Carousel можно передать объектом javascript:

jQuery

$('.carousel').carousel({
  interval: 2000,
  pause: ‛hover“,
    wrap: true
})

Вы также можете использовать методы слайдера:

jQuery

.carousel('pause') // to pause the slider
.carousel('cycle') // to cycle through the slider items
.carousel(2) // to forcibly display the the 3rd slide in the slider
.carousel('prev') // to show the previous slide
.carousel(‘next’) // to show the next slide in the slider

Приведенные выше методы могут быть вызваны из любого javascript кода и оказать влияние на работу слайдера. Методы find и prev полезны, особенно когда вам требуется использовать свои кнопки, а не кнопки от Bootstrap.

Заключение

Теперь вы можете быстро создать слайдер без написания 1000 строк javascript кода.

Я думаю, при правильном использовании javascript компоненты от Bootstrap могут быть неотъемлемой частью веб-разработки.

Они, безусловно, сэкономят часть вашего времени. Кроссбраузерность!

по материалам

Похожие статьи из платного раздела

1. Twitter Bootstrap 3 – javascript компоненты
2. Понимание Twitter Bootstrap 3 (HTML/CSS)