Новини високих технологій
» » Owl Carousel: налаштування і підключення

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

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


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

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

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


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

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

CSS

В Owl Carousel 1.3 налаштування залишаються практично такими ж, як і в більш нової другої версії, додаються тільки нові функції. Однак базова інформація буде такою ж, починаючи з додавання CSS в ваш документ. Отже, перший крок – це додати в HTML-код рядка . Що вона вам дає? Це рядок, який завантажує на сайт необхідні стилі для відображення слайдера. На цьому ви можете закінчити, зайнявшись візуальної обробкою самостійно. Однак є і більш зручне і швидке рішення. Ви також можете додати рядок , яка завантажує також стандартну тему слайдера, що робить його моментально готовим до використання. Можете відредагувати деякі стилі, зробивши ваш слайдер більш унікальним і незвичайним, а також більш підходящим для вашого контенту. Природно, налаштування 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, яка дозволяє вам задати кількість відображуваних слайдів в залежності від ширини екрана, на якому проглядається сторінка.
Цікаво по темі
Команди для командного блоку на зброю у "Майнкрафте"
Команди для командного блоку на зброю у "Майнкрафте"
"Майнкрафт" - це гра безмежних можливостей, тому немає нічого дивного в тому, що командний блок може запропонувати вам щось неймовірне.
Як поставити "сет хом" в "Майнкрафт" і навіщо це робити?
Як поставити "сет хом" в "Майнкрафт" і навіщо це робити?
У "Майнкрафте" кожен гравець при телепортації або смерті виявляється в точці спавна. Але за допомогою однієї команди ви можете задати зовсім іншу
Як вставити в HTML iframe: приклад використання
Як вставити в HTML iframe: приклад використання
Новий час – нові технології. На заміну застарілим тегам для організації фреймів приходить в HTML iframe. Приклад використання вдосконаленого елемента
Як скинути налаштування «Гугл Хром»: опис
Як скинути налаштування «Гугл Хром»: опис
Браузер Google Chrome, як і будь-яка інша програма, що має певні налаштування за замовчуванням. Вони ...
Інструкція, як в "КС" додавати ботів
Інструкція, як в "КС" додавати ботів
"Контер Страйк" ("КС") - це найбільша гра з жанру шутери від першої особи. Щодня мільйони гравців приєднуються ...
Overflow CSS: відображення змісту елемента
Overflow CSS: відображення змісту елемента
Не тільки поява мобільних пристроїв привело до необхідності контролювати вміст елементів, кожен кваліфікований розробник практикує управління кожним