Owl Carousel: налаштування і підключення

Багато людей на власному сайті хочуть бачити слайдери – це такі блоки, які відображають один елемент контенту на екрані, а після певного відрізка часу змінюють цей контент на інший. Природно, кожен веб-розробник здатний самостійно створити слайдер з допомогою HTML, CSS і JavaScript, однак далеко не завжди в цьому є сенс. Ви витратите чимало часу, притому що в Інтернеті є досить багато вже готових рішень, що значно полегшують ваше життя і роблять ваш сайт значно більш привабливим. У даній статті мова піде про один з таких рішень під назвою Owl Carousel. Налаштування цього слайдера є неймовірно простий, тому з нею впорається навіть починаючий. Зараз ви дізнаєтеся, що собою являє цей слайдер, а також інші важливі деталі. Налаштування Owl Carousel виконується покроково, так що вам варто вивчати цей матеріал виключно по порядку.

Що це таке і чому варто вибрати саме цей слайдер?

Owl Carousel, настроювання якого буде розглядатися в даній статті, є дуже ефективним плагіном, який додає на вашу сторінку красивий і зручний слайдер, що значно полегшить вам роботу над сайтом, дозволивши заощадити немало часу, зусиль і коштів. У чому ж переваги саме цього плагіна, адже слайдерів в Мережі є досить багато? Справа в тому, що цей слайдер пропонує вам кілька десятків опцій налаштування, що дозволить вам зробити вашу сторінку унікальною і неповторною. Це адаптивний плагін, який буде працювати на всіх версіях браузерів, а також його можна легко підключити WordPress та інших популярних CMS. Загалом, переваг у цього слайдера є дуже багато, тому вам варто виразно зробити вибір на його користь. Однак, перш ніж почати налаштування Owl Carousel, цей плагін ще потрібно завантажити.

Більше:

Що означає смайл "мавпочка з закритими очима" і в яких ситуаціях його використовувати?

Інтернет відіграє величезну роль у нашому житті. За допомогою нього можна знайти практично будь-яку потрібну інформацію. У 21-му столітті ми навіть спілкування слабо уявляємо без підключення до Мережі. Мобільні оператори постійно нарікають на втрату ...

Як у "ВК" видалити сторінку через телефон? Поради, етапи

До недавнього часу, щоб назавжди видалити сторінку "ВК" потрібно було зробити запит в техпідтримку із зазначенням причини або вчинити дію, що суперечить політиці "ВКонтакте". Останній спосіб призводить до блокування профілю і подальшого видалення. Ал...

Наталія Ящук. Хто вона? Блогер, вайнер або телеведуча?

Користувачі інтернету напевно бачили смішні відеоролики, звані вайнами. У мережі їх на сьогодні тисячі. Роблять їх абсолютно різні люди, і сюжети теж різноманітні. Так ось, один з авторів таких роликів - неймовірна Наталія Ящук! Хто ж вона, ця усміхн...

Завантаження

Налаштування Owl Carousel 2 неможлива, якщо ви не завантажили його собі на комп'ютер, а так як це покрокова інструкція, починати варто з самого початку. Отже, програму можна завантажити з допомогою пакетних менеджерів, однак це просунуті інструменти розробника, тому тут буде розказано, як отримати цей плагін стандартним способом. Вам потрібно зайти на офіційний сайт плагіна і його завантажити останню версію. Після цього всі викачані файли потрібно перенести в директорію вашого сайту, підготувавши зручну папку, яка називається так само, як і сам плагін. Зверніть увагу на те, що цей плагін пов'язаний з jQuery, тому вам також потрібно мати в наявності і цю бібліотеку. Що ж, коли ви завантажите цей плагін, вам потрібно буде зайнятися наступним кроком, а саме налаштуванням слайдера Owl Carousel 2.

CSS

Owl Carousel 1.3 налаштування залишаються практично такими ж, як і в більш нової другої версії, додаються тільки нові функції. Однак базова інформація буде такою ж, починаючи з додавання CSS в ваш документ. Отже, перший крок – це додати в HTML-код рядка <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">. Що вона вам дає? Це рядок, який завантажує на сайт необхідні стилі для відображення слайдера. На цьому ви можете закінчити, зайнявшись візуальної обробкою самостійно. Однак є і більш зручне і швидке рішення. Ви також можете додати рядок <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">, яка завантажує також стандартну тему слайдера, що робить його моментально готовим до використання. Можете відредагувати деякі стилі, зробивши ваш слайдер більш унікальним і незвичайним, а також більш підходящим для вашого контенту. Природно, налаштування Owl Carousel російською були б дуже зручними, проте кожна людина, яка створює сайти, повинен розуміти, що без знання англійської йому не обійтися.

Підключення JavaSpript

Звісно, слайдер не буде працювати без JS, тому вам необхідно також подбати про те, щоб підключити відповідний файл, що містить потрібний код. Для цього вам потрібно вставити рядок коду з документації, проте при обов'язковому дотриманні однієї умови. Всі знають, що JS – це мова програмування, який виконує всі команди по черзі, відповідно, в даному випадку вам варто додавати цю строчку коду після тієї рядка, яка додає у ваш документ бібліотеку jQuery. Більше з JS у випадку з цим слайдером вам не потрібно нічого робити.

Оформлення HTML-коду

Що ж, ви підключили слайдер, тепер настав час його оформити і налаштувати. У першу чергу вам необхідно написати HTML-код, щоб слайдер взагалі з'явився на вашій сторінці. Для цього вам потрібно створити контейнер, в якому будуть міститися слайди. Зробити це можна з використанням тега div, якому потрібно приписати клас owl-carousel. Саме цей клас забезпечує те, що всі стилі, які відносяться до слайдеру, будуть активовані. Також ви можете прописати ще один клас - owl-theme. Він стане в нагоді вам в тому випадку, якщо ви вирішили використовувати дизайн за замовчуванням або ж взяли стандартну версію слайдера в якості основи для подальшої роботи.

Потім вам потрібно додавати кожен слайд в окремому контейнері з тегом div.Природно, ви можете використовувати і інші теги, проте найкраще у випадку зі слайдерами підходить саме цей тег.

Виклик плагіна

Ну і останнє, що вам потрібно зробити, щоб на вашому сайті з'явився вже готовий слайдер, – це використовувати даний блок коду:

$(document).ready(function(){

$(".owl-carousel").owlCarousel();

});

Він гарантує, що слайдер почне функціонувати, тобто прокручувати контент, коли завантажиться ваша сторінка. З допомогою цього коду ви можете підключити Owl Carousel до WordPress. Установки цього плагіна є численними та різноманітними, і зараз ви дізнаєтеся про самих ключових моментах.

Налаштування вигляду і функціональності слайдера

Отже, які ж команди ви можете використовувати, щоб налаштувати ваш слайдер? У першу чергу вам потрібно запам'ятати команду items, так як з її допомогою ви можете ставити конкретну кількість слайдів у вашому слайдері. Команда loop дозволить вам вибрати, зациклювати чи слайдер, або зупинити прокручування на останньому елементі. Є також команда Drag, яка має кілька варіантів, наприклад, mouse і touch. У першому випадку ви можете зробити так, щоб елементи вашого слайдера можна було перегортати затиснутою мишкою, а в другому випадку – з допомогою дотику (ця команда підходить для мобільних пристроїв). Ще одна важлива команда – це nav, яка включає відображення стрілок навігації. Разом з нею ви можете використовувати команду navText, додаючи підписи до кнопок навігації. Також вам не варто забувати про команду autoplay, яка дозволяє включати і вимикати автоматичний старт перегляду слайдів вашого слайдера при завантаженні сторінки. Разом з цією командою можна також використовувати autoplayTimeout, для якої ви можете задати конкретне значення в мілісекундах, яке визначить час між автоматичним перегортанням кожного зі слайдів.

Якщо ви використовуєте адаптивний веб-дизайн, тобто дизайн вашої сторінки автоматично змінюється в залежності від того, на якому пристрої він проглядається, то вам обов'язково потрібно пам'ятати про команду responsive, яка дозволяє вам задати кількість відображуваних слайдів в залежності від ширини екрана, на якому проглядається сторінка.