Слайдер Owl Carousel 2. Установка и настройка

Слайдер Owl Carousel 2. Установка и настройка

От автора: приветствую вас, друзья. В этой статье мы продолжим работу со слайдерами jQuery и на очереди у нас один из популярнейших на сегодняшний день слайдеров — это слайдер карусель Owl Carousel 2.

Итак, давайте разберем работу с еще одним слайдером jQuery — это слайдер-карусель Owl Carousel 2. Чем же это решение заслужило свою популярность среди веб-разработчиков, которые могут выбирать из сотен аналогичных решений? Слайдер Owl Carousel предлагает нам следующие фишки:

огромное количество настроек для полной кастомизации слайдера (свыше 60 опций);

совместимость с мобильными устройствами;

поддержка прикосновений и перетаскиваний;

полностью адаптивен;

совместим со всеми современными браузерами.

Это лишь краткий перечень основных плюсов Owl Carousel 2. Давайте перейдем от слов к делу и рассмотрим некоторые примеры установки и настройки плагина, который для начала нам нужно скачать. Сделать это можн, кликнув по соответствующей кнопке на официальной странице плагина.

Слайдер Owl Carousel 2. Установка и настройка

Также вы можете взять архив с плагином из исходников к данной статье. Далее нам нужно подключить пару файлов стилей (owl.carousel.css и owl.theme.default.css) и сам плагин (owl.carousel.js). Конечно же, не забываем подключить библиотеку jQuery, куда же без нее — это ведь jQuery плагин.

<link rel="stylesheet" href="owl-carousel/css/owl.carousel.css">
<link rel="stylesheet" href="owl-carousel/css/owl.theme.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="owl-carousel/js/owl.carousel.js"></script>

На следующем этапе у нас идет разметка. Она очень проста: в блок div, который служит оберткой карусели, мы помещаем прочие блоки, которые станут отдельными слайдами.

<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>

И, наконец, вызываем метод плагина:

$(function() {
	$(".owl-carousel").owlCarousel();
});

В результате мы получили базовую функциональность карусели, в которой можем перемещать слайды мышью.

Слайдер Owl Carousel 2. Установка и настройка

Оформления пока, как такового, нет. Мы вольны сами при желании его набросать в CSS. Пожалуй, вместо текста давайте поместим в блоки изображения — будет все же веселее и красивее.

<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>

Слайдер Owl Carousel 2. Установка и настройка

А теперь давайте поработаем с опциями плагина. Добавим навигацию и зациклим карусель, т.е. после последнего слайда разрешим показывать первый и т.д. Это помогут сделать опции nav и loop соответственно.

$(".owl-carousel").owlCarousel({
	nav:true,
	loop:true,
});

Слайдер Owl Carousel 2. Установка и настройка

Навигация появилась, но как-то странно это… мы ведь подключили в самом начале файл стилей темы по умолчанию (owl.theme.default.css), а теперь нам еще и оформлять карусель? На самом деле нет, не волнуйтесь. Чтобы тема применилась, необходимо для слайдера добавить класс owl-theme:

<div class="owl-carousel owl-theme">
	...
</div>

Слайдер Owl Carousel 2. Установка и настройка

Супер! Мне нравится. Таким же образом можно применять и другие настройки, описания которых можно найти в документации и примерах использования на официальном сайте. На этом сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree