Приветствую дорогие читатели моего блога 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() // остановка авто-прокрутки
Вот и все хорошего дня вам 😉
Если заинтересует можно посмотреть по этой теме: Красивые Слайдеры,Слайд-шоу и Галереи для вашего сайта
