Сегодня мы покажем вам плагин 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
Специального кода не надо. Всё что вам нужно, так это заключить контент карусели в <div 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() // остановка авто-прокрутки

Добавлено: 01 Мая 2018 15:27:01 Добавил: Андрей Ковальчук Нравится 0

Добавить