Плагин для создания адаптивной карусели

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

1. Подключаем стили, jQuery и плагин:

Код
<!-- Основные стили -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">

<!-- Тема по умолчанию -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">

<!-- Подключаем jQuery -->
<script src="jquery-1.9.1.min.js"></script>

<!-- Подключаем плагин -->
<script src="assets/owl-carousel/owl.carousel.js"></script>

2. Настраиваем HTML

Специального кода не надо. Всё что вам нужно, так это заключить контент карусели в class="owl-carousel". Стили для класса "owl-carousel” описаны в файле owl.carousel.css:

Код
<div id="owl-example" class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  ...
</div>

3. Вызываем плагин

Код
$(document).ready(function() {

  $("#owl-example").owlCarousel();

});

Использование API

Код
// Инициализация плагина
$(".owl-carousel").owlCarousel()

// получаем объект карусели и записываем в переменную
var owl = $(".owl-carousel").data('owlCarousel');

// публичные методы
owl.next() // переходим на следующий слайд
owl.prev() // переходим на предыдущий слайд
owl.goTo(x) // переходим на слайд x

owl.update() // обновляем слайд

owl.buildControlls() // отображаем элементы управления
owl.destroyControlls() // удаляем элементы управления

owl.play() // авто-прокрутка
owl.stop() // остановка авто-прокрутки

  • FalleN

  • 3963

  • 1

  • 234

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!