Сайт плагіна: owlgraphic.com/owlcarousel/ (на момент написання статті - не працює)
Крок 1. Завантажуємо і підключаємо карусель
Так як домен сайту з документацією по даній каруселі зараз (на момент написання статті) не працює, ми будемо працювати з github репозиторієм в якому можна скачати код і подивитися документацію даного плагіна.
Переходимо на репозиторій каруселі і натискаємо по зеленій кнопці «Clone or download». далі натискаємо «Download ZIP». Тепер у вас є файли для підключення до проекту.
Разархівіруем файли, знаходимо всередині папку з назвою «owl-carousel» і кладемо до себе в проект всередині папки «libs». У вас розташування може бути і іншим, але я в уроці буду використовувати саме таке.
Підключаємо карусель. У шапці сторінки, всередині тега head підключаємо CSS стилі:
В кінці сторінки, перед закриває тегом
підключаємо jQuery бібліотеку (я використовував посилання на jQuery яка розташована в інтернеті на сайті Googleapis)
На цьому кроці ми підключили файли плагіна каруселі до нашої сторінці.
Крок 2. Підготуємо html розмітку
Створимо html розмітку під слайди для нашої каруселі.
Основні правила тут такі:
Необхідно створити загальний контейнер, в якому будуть лежати слайди нашої каруселі. У нас це контейнер
.
. Задаємо йому клас class = "owl-carousel" щоб застосувати потрібні стилі з бібліотеки каруселі. І даємо йому id = "slider_container". Значення id може бути будь-яким. По ньому ми будемо звертатися і викликати (запускати) нашу карусель.
Всередині контейнера, створюємо блоки для слайдів. вони повинні мати однакову структуру. Така як у нас це тільки картинки, тому ми кладемо сюди 6 зображень. Природно кількість слайдів може бути будь-яким. Якщо необхідно покласти в слайд не тільки зображення, але і текст, і інші елементи, то кожен слайд необхідно буде обернути в порожній div.
В такому випадку, виглядати це буде ось так:
Але ми будемо робити тільки для картинок, тому цей лістинг (приклад розмітки) використовувати не будемо.
Крок 3. Виклик (ініціалізація) плагіна
Тепер треба запустити нашу карусель. Іншими словами, потрібно сказати плагіну що див з id = "slider_container» це контейнер нашої каруселі. Для цього в файлі main.js пропишемо наступне:
Конструкція $ (document) .ready (function () <…>); тут означає те що код всередині неї спрацює тоді, коли буде завантажена бібліотека jQuery і вся HTML сторінка. Після цього відбудеться виклик плагіна каруселі - тобто до який написаний всередині.
Сам виклик каруселі відбувається наступною конструкцією: $ ( "# slider_container"). OwlCarousel (); Тут йде вибір елемента контейнера для каруселі, у нас це #slider_container тобто div з id = # slider_container. і далі до нього прикручується карусель.
На цьому кроці підключення каруселі може бути закінчено, так як тепер вона підключена і працює.
Крок 4. Налаштування каруселі
При підключенні плагіна, ми можемо поставити каруселі певні настройки, які описані в документації. Робиться це шляхом передачі об'єкта з параметрами, при ініціалізації плагіна. Виглядає наступним чином:
У лістингу нижче я привів вибірково деякі настройки. Повний список можливих параметрів і їх значення можна подивитися на сайті з документацією.
Параметри типу items визначають скільки слайдів буде відображатися на різних розмірах екрану. Параметр autoPlay визначає чи буде карусель сама автоматично перегортати слайди. stopOnHover - чи буде авто-програвання зупинятися по наведенню курсора на слайд чи ні.
Параметр navigation - показ стрілок для перемикання слайдів. transitionStyle - спеціальний ефект зміни слайдів. Щоб він працював, в шапці необхідно підключити файл owl.transitions.css.
Назви параметрів чутливі до регістру.
Крок 5. Налаштування зовнішнього вигляду
Сподобався пост? Поділіться посиланням з друзями, вони оцінять:
