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

37

Від автора: вітаю вас, друзі. У цій статті ми продовжимо роботу зі слайдерами 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, який служить обгорткою каруселі, ми поміщаємо інші блоки, які стануть окремими слайдами.

Слайд 1
Слайд 2
Слайд 3
Слайд 4
Слайд 5
Слайд 6
Слайд 7
Слайд 8
Слайд 9
Слайд 10

І, нарешті, викликаємо метод плагіна:

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

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

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

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

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

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

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

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

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

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

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

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