Слайдер 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 плагин.

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

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

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

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

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

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

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

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

jQuery: основы

Изучите jQuery с нуля!

Смотреть

Метки:

Похожие статьи:

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

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

Комментарии (4)

  1. Сергей

    Спасибо за отличный материал. Подскажите, а этот слайдер совместим с lightbox ? То есть, есть ли возможность открывать фото галереи в модальном окне?

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