Від автора: вітаю вас, друзі. У цій статті ми продовжимо роботу зі слайдерами 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 плагін.
На наступному етапі у нас йде розмітка. Вона дуже проста: в блок div, який служить обгорткою каруселі, ми поміщаємо інші блоки, які стануть окремими слайдами.
І, нарешті, викликаємо метод плагіна:
$(function() {
$(“.owl-carousel”).owlCarousel();
});
В результаті ми отримали базову функціональність каруселі, в якій можемо переміщати слайди мишею.
Оформлення, як такого, немає. Ми вільні самі при бажанні його накидати в CSS. Мабуть, замість тексту давайте помістимо в блоки зображення — буде все ж веселіше і красивіше.
А тепер давайте попрацюємо з опціями плагіна. Додамо навігацію і зациклим карусель, тобто після останнього слайда дозволимо показувати перший і т. д. Це допоможуть зробити опції nav і loop відповідно.
$(“.owl-carousel”).owlCarousel({
nav:true,
loop:true,
});
Навігація з’явилася, але якось дивно це… адже ми підключили самому початку файл стилів теми за замовчуванням (owl.theme.default.css), а тепер ще й оформляти карусель? Насправді немає, не хвилюйтеся. Щоб тема применилась, необхідно для слайдера додати клас owl-theme:
Супер! Мені подобається. Таким же чином можна застосовувати і інші настройки, опис яких можна знайти в документації і прикладах використання на офіційному сайті. На цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!
