От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и на очереди у нас один из популярнейших на сегодняшний день слайдеров — это слайдер карусель Owl Carousel 2.
Итак, давайте разберем работу с еще одним слайдером jQuery — это слайдер-карусель Owl Carousel 2. Чем же это решение заслужило свою популярность среди веб-разработчиков, которые могут выбирать из сотен аналогичных решений? Слайдер Owl Carousel предлагает нам следующие фишки:
огромное количество настроек для полной кастомизации слайдера (свыше 60 опций);
совместимость с мобильными устройствами;
поддержка прикосновений и перетаскиваний;
полностью адаптивен;
совместим со всеми современными браузерами.
Это лишь краткий перечень основных плюсов Owl Carousel 2. Давайте перейдем от слов к делу и рассмотрим некоторые примеры установки и настройки плагина, который для начала нам нужно скачать. Сделать это можн, кликнув по соответствующей кнопке на официальной странице плагина.
Также вы можете взять архив с плагином из исходников к данной статье. Далее нам нужно подключить пару файлов стилей (owl.carousel.css и owl.theme.default.css) и сам плагин (owl.carousel.js). Конечно же, не забываем подключить библиотеку jQuery, куда же без нее — это ведь jQuery плагин.
|
1 2 3 4 |
<link rel="stylesheet" href="owl-carousel/css/owl.carousel.css"> <link rel="stylesheet" href="owl-carousel/css/owl.theme.default.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="owl-carousel/js/owl.carousel.js"></script> |
На следующем этапе у нас идет разметка. Она очень проста: в блок div, который служит оберткой карусели, мы помещаем прочие блоки, которые станут отдельными слайдами.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="owl-carousel"> <div>Слайд 1</div> <div>Слайд 2</div> <div>Слайд 3</div> <div>Слайд 4</div> <div>Слайд 5</div> <div>Слайд 6</div> <div>Слайд 7</div> <div>Слайд 8</div> <div>Слайд 9</div> <div>Слайд 10</div> </div> |
И, наконец, вызываем метод плагина:
|
1 2 3 |
$(function() { $(".owl-carousel").owlCarousel(); }); |
В результате мы получили базовую функциональность карусели, в которой можем перемещать слайды мышью.
Оформления пока, как такового, нет. Мы вольны сами при желании его набросать в CSS. Пожалуй, вместо текста давайте поместим в блоки изображения — будет все же веселее и красивее.
|
1 2 3 4 5 6 |
<div class="owl-carousel"> <div><img src="images/nemo.jpg"></div> <div><img src="images/toystory.jpg"></div> <div><img src="images/up.jpg"></div> <div><img src="images/walle.jpg"></div> </div> |
А теперь давайте поработаем с опциями плагина. Добавим навигацию и зациклим карусель, т.е. после последнего слайда разрешим показывать первый и т.д. Это помогут сделать опции nav и loop соответственно.
|
1 2 3 4 |
$(".owl-carousel").owlCarousel({ nav:true, loop:true, }); |
Навигация появилась, но как-то странно это… мы ведь подключили в самом начале файл стилей темы по умолчанию (owl.theme.default.css), а теперь нам еще и оформлять карусель? На самом деле нет, не волнуйтесь. Чтобы тема применилась, необходимо для слайдера добавить класс owl-theme:
|
1 2 3 |
<div class="owl-carousel owl-theme"> ... </div> |
Супер! Мне нравится. Таким же образом можно применять и другие настройки, описания которых можно найти в документации и примерах использования на официальном сайте. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
Комментарии (4)