Слайдер зображень owl carousel 2

У цій статті ми розглянемо настройку і установку нової версії адаптивного слайдера зображень Owl Carousel 2 працює на всіх пристроях.

Нова версія слайдера включає в себе близько 60 опцій для настройки каруселі, повну підтримку всіх мобільних пристроїв, а саме зручне перегортання одним дотиком пальця.

Owl Carousel 2 використовує апаратне прискорення CSS3 Translate3d підтримуване усіма сучасними браузерами, а так само є підтримка старих CSS2 браузерів.

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

Слайдер картинок Owl Carousel 2 - установка, настройка, опис

Неважливо новачок ви або просунутий користувач, почати працювати з каруселлю зображень Owl Carousel 2 легко!

Owl Carousel 2 цієї статті не сумісна з першою версією плагіна. Ідея та принцип роботи каруселі залишився колишній і вона має багато спільного з Owl Carousel 1, але основний код був переписаний з нуля і розробник дуже пишається усіма новими можливостями.

Робота Owl Carousel 2 була успішно протестована в наступних браузерах і на мобільних пристроях:

Google Chrome
Mozilla Firefox
Opera
Microsoft IE7 / 8/10/11
Apple iPad Safari
Apple iPod4 Safari
Nexus 7 Chrome
Samsung Galaxy S4
Nokia 8s Windows8
Library

Останню версію плагіна можете завантажити за посиланням:

Owl Carousel 2.0.0-beta.2.4
Owl Carousel 2.2.1
Скомпільована і зменшена версія. Файли плагіна, зображення і CSS стилі включені.

Установка слайдера зображень на сайт

Підключіть бібліотеку jQuery і файли плагіна Owl Carousel. Мінімальна версія бібліотеки jQuery 1.7 або вище, ця версія включена в архів.

Установка HTML коду

Ніякої спеціальної HTML розмітки не потрібно для роботи слайдера. Все що вам потрібно зробити це обернути блоки в div теги (owl працює з будь-яким типом елементів) всередині контейнера

. Клас "owl-carousel" є обов'язковим, інакше будуть невірно призначені стилі з файлу owl.carousel.css.

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

Ініціалізіруем функції плагіна і наша карусель для зображень готова.

  • Адаптивний слайдер зображень Owl Carousel Slider. Має досить велику кількість налаштувань, простий в установці і роботі.

    Основні параметри Owl Carousel 2

    У цьому прикладі я встановив наступні опції: loop: true (нескінченне перегортання), margin: 10 (відступ з усіх боків) і nav: true (кнопки навігації). Плагін працює з усіма типами DOM елементів. У всіх прикладах використовується елемент

    .
    , але ви можете використовувати будь-яку іншу елемент div / span / a / img.

    перетягувати

    нескінченний

    авто ширина

    Параметр responsive дозволяє задавати кількість і розмір елементів на сторінці в залежності від ширини вікна браузера. Спробуйте змінити ширину браузера, щоб побачити, що відбувається з елементами і кнопками навігації.

    Що потрібно знати про адаптивне слайдері Owl Carousel 2

    • Ширина вікна браузера задається тільки в цифровому вигляді (як в прикладі): '480'.
    • Слайдер Owl Carousel має вбудовану підтримку сортування параметрів ширини браузера, але краще вказувати ширину по зростанню починаючи від самого маленького екрану до самого широкого.
    • Значення в опції responsive завжди мають пріоритет перед раннє встановленими параметрами відображення.
    • Для різних пристроїв або дозволів екрану можна задати будь-який вид відображення слайдера, включити або вимкнути навігацію і т.д.
    • За замовчуванням опція responsive включена і слайдер елементів розтягується на всю ширину батьківського елемента (навіть якщо не підтримуються CSS3 media queries в браузерах IE7 / IE8 і т. П.).
    • Якщо вам необхідно відключити адаптивний показ слайдера встановіть таке значення опції responsive: false.

    Опції для параметра responsive:

    responsiveClass

    Опціональний параметр. Додає клас 'owl-reponsive-' + 'ширина вікна' до головного елементу.

    responsiveBaseElement

    За замовчуванням всі реагують тригери подій це ширина вікна. Ця опція дає вам можливість змінити його на свій власний клас / id наприклад responsiveBaseElement: ". MyCustomWrapper"

    responsiveRefreshRate

    Швидкість оновлення. Це затримка в 200мс після того як ви змінили ширину вікна браузера і зміною розмірів елементів (перерахунку ширини елементів / клонування елементів і т.д.) За замовчуванням швидкість оновлення 200мс. Думаю, це найоптимальніша швидкість, але під свої потреби ви можете змінити її.

    Не всі параметри плагіна можна використовувати в адаптивному вигляді, нижче список доступних.

    Список опцій для параметра responsive

    • items
    • loop
    • center
    • mouseDrag
    • touchDrag
    • pullDrag
    • freeDrag
    • margin
    • stagePadding
    • merge
    • mergeFit
    • autoWidth
    • autoHeight
    • nav
    • navRewind
    • slideBy
    • dots
    • dotsEach
    • autoplay
    • autoplayTimeout
    • smartSpeed
    • fluidSpeed
    • autoplaySpeed
    • navSpeed
    • dotsSpeed
    • dragEndSpeed
    • responsiveRefreshRate
    • animateOut
    • animateIn
    • fallbackEasing
    • callbacks
    • info

    Параметри активізуються тільки при після завантаження плагіна

    • startPosition
    • URLhashListener
    • navText
    • dotData
    • lazyLoad
    • lazyContent
    • autoplayHoverPause
    • responsiveBaseElement
    • responsiveClass
    • video
    • videoHeight
    • videoWidth
    • nestedItemSelector
    • itemElement
    • stageElement
    • navContainer
    • dotsContainer