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