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

06.08.2013

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

Приветствую дорогие читатели моего блога rendzhi.com сегодня я расскажу вам о плагине OWL Carousel, c помощью которого можно создать адаптивную карусель, работающую, в том числе, на сенсорных устройствах.

Как использовать


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

Специального кода не надо. Всё что вам нужно, так это заключить контент карусели в

. Стили для класса “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() // остановка авто-прокрутки

Вот и все хорошего дня вам 😉
Если заинтересует можно посмотреть по этой теме: Красивые Слайдеры,Слайд-шоу и Галереи для вашего сайта


Скачать:   Демо:   Источник:

Другие темы:

Как создать Функциональную галерею на PHP и jQuery
Создаем свою CMS на PHP и MySQL. Часть 3
PHP-Комментария
Бесплатные уроки по созданию Интернет-магазина с нуля