Owl Carousel 2. Плагин jQuery для создания адаптивных слайдеров и каруселей

Owl Carousel 2 — последняя версия слайдера, включает в себя множество опций для настройки слайдера или карусели, полную поддержку всех мобильных устройств, а именно удобное перелистывание одним касанием пальца. 

Owl Carousel 2 использует аппаратное ускорение CSS3 Translate3d поддерживаемое всеми современными браузерами, а так же есть поддержка старых CSS2 браузеров.

  • Chrome
  • Firefox
  • Opera
  • IE7/8/10/11
  • iPad Safari
  • iPod4 Safari
  • Nexus 7 Chrome
  • Galaxy S4
  • Nokia 8s Windows8

Owl Carousel 2 поддерживает множество плагинов для расширения функционала. Благодаря этой возможности вы можете исключить из плагина ненужные модули или наоборот добавить необходимые.

 

Подключение CSS

В тег <head> подключите два CSS-файла:

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

Первый файл owl.carousel.min.css обязателен и должен быть подключён выше всех.

Второй файл owl.theme.default.min.css — это стандартные навигационные элементы для вашего слайдера, он является необязательным и не стесняйтесь редактировать его. Внутри исходного пакета вы также можете найти SCSS файлы для легкой генерации ваших собственных тем.

 

Подключение JS

JS-файлы необходимо подключать в подвале сайта перед закрывающимся тегом </body>

<script src=»jquery.min.js"></script> //Библиотека JQuery
<script src="owlcarousel/owl.carousel.min.js"></script>

Файл owl.carousel.min.js должен быть подключён после библиотеки JQuery.

Установка HTML

Все, что нужно, это обернуть все элементы (слайды) в тег div (owl работает с любыми элементами типа a, img, span..) внутри элемента контейнера <div class= "owl-carousel">. Класс «owl-carousel» является обязательным для применения правильных стилей из owl.carousel.min.css. Если вам нужны навигационные элементы управления по умолчанию, такие как точки или кнопки, вы также можете подключить класс «owl-theme» в том же теге div.

<div class=»owl-carousel owl-theme">
  <div><img src=“/img/images1.jpg“ /></div>
  <div><img src=“/img/images2.jpg“ /></div>
  <div><img src=“/img/images3.jpg“ /></div>
  <div><img src=“/img/images4.jpg“ /></div>
  <div><img src=“/img/images5.jpg“ /></div>
  <div><img src=“/img/images6.jpg“ /></div>
  <div><img src=“/img/images7.jpg“ /></div>
</div>

 

Инициализация плагина

Код необходимо разместить в кастомный js-файл.

$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});

 

Опции плагина

Список, включающий все опции, встроенных в плагины video, lazyload, autoheight и animate.

items

Тип: Number По умолчанию: 3

Количество видимых элементов на экране.

margin

Тип: Number По умолчанию: 0

Отступ справа от каждого элемента в пикселях (margin-right)


loop

Тип: Boolean По умолчанию: false

Бесконечная прокрутка элементов. Дублируются последние и первые элементы.


center

Тип: Boolean По умолчанию: false

Каждый элемент отображается по центру области. Хорошо работает с четными и нечетными элементами на экране. Точечная навигация при таком раскладе не работает, как нумерация страниц.


mouseDrag

Тип: Boolean По умолчанию: true

Навигация мышью.


touchDrag

Тип: Boolean По умолчанию: true

Навигация свайпами на мобильных устройствах.


pullDrag

Тип: Boolean По умолчанию: true

Навигация по нажатию.


freeDrag

Тип: Boolean По умолчанию: false

Свободное перемещени . Стяжка по краям.


stagePadding

Тип: Number По умолчанию: 0

Внутреннии отступы справа и слева в пикселях (сможете увидеть соседей).


merge

Тип: Boolean По умолчанию: false

Объединить элементы. Ишет атрибут data-merge= '{number} ' внутри элемента..


mergeFit

Тип: Boolean По умолчанию: true

Подгоняет объединенные элементы, если экран меньше, чем значение элементов.


autoWidth

Тип: Boolean По умолчанию: false

Отменяет сетку. Необходимо указывать ширину div-ов.

 

autoHeight

Тип: Boolean По умолчанию: false

На данный момент работает только с 1 элемента на экране. При включении каждый элемент имеет свою высоту. При отключеном параметре все блоки одинаковой высоты (если не указан autoHeightClass, то берётся от наибольшего значения).

autoHeightClass

Тип: String По умолчанию: „“

Класс для определения высоты слайда.

//default settings:
AutoHeight.Defaults = {
    autoHeight: false,
    autoHeightClass: „owl-height'
};

startPosition

Тип: Number/String По умолчанию: 0

Начальная позиция или строка хэша URL, например '#id'.


URLhashListener

Тип: Boolean По умолчанию: false

Прослушивание изменений хэша url. Атрибут data-hash для элементов не требуется.


Тип: Boolean По умолчанию: false

Показывает кнопки навигации следующий/предыдущий (стрелки).


rewind

Тип: Boolean По умолчанию: true

Прокручивает слайды назад, когда достигнута граница.


Тип: Array По умолчанию: [&#x27;next&#x27;,&#x27;prev&#x27;]

HTML разрешен.


Тип: String По умолчанию: div

Тип элемента DOM для одного канала направленной навигации.


slideBy

Тип: Number/String По умолчанию: 1

Навигация по слайду по оси «X». Строка 'page' может быть установлена в слайд по странице.


slideTransition

Тип: String По умолчанию: ``

Вы можете определить переход для этапа, который вы хотите использовать, например. линейный.


dots

Тип: Boolean По умолчанию: true

Показывает точечную навигацию.


dotsEach

Тип: Number/Boolean По умолчанию: false

Показывает точечную навигацию по оси «X».


dotsData

Тип: Boolean По умолчанию: false

Используется содержимое атрибута data-dot.


lazyLoad

Тип: Boolean По умолчанию: false

Ленивая загрузка изображений. data-src и data-src-retina для высокого разрешения. Также загружайте изображения в фоновый встроенный стиль, если элемент не <img>


lazyLoadEager

Тип: Number По умолчанию: 0

Нетерпеливо предварительно загружает изображения вправо (и влево, когда цикл включен) на основе того, сколько элементов вы хотите предварительно загрузить.


autoplay

Тип: Boolean По умолчанию: false

Автозапуск слайдера.


autoplayTimeout

Тип: Number По умолчанию: 5000

Таймаут интервала автозапуска.


autoplayHoverPause

Тип: Boolean По умолчанию: false

Пауза при наведении мыши.


smartSpeed

Тип: Number По умолчанию: 250

Скорость анимации.


fluidSpeed

Тип: Boolean По умолчанию: Number

Скорость анимации.


autoplaySpeed

Тип: Number/Boolean По умолчанию: false

Скорость автозапуска.


Тип: Number/Boolean По умолчанию: false

Скорость переключения слайдов стрелками.


dotsSpeed

Тип: Boolean По умолчанию: Number/Boolean

Скорость переключения слайдов точками.


dragEndSpeed

Тип: Number/Boolean По умолчанию: false

Сопротивление и скорость.


callbacks

Тип: Boolean По умолчанию: true

Включить события обратного вызова.


responsive

Тип: Object По умолчанию: empty object

Объект содержит в себе настройки для адаптивности. Если установить значение в false — поддержка адаптивности отключается.

responsiveRefreshRate

Тип: Number По умолчанию: 200

Адаптивная частота обновления.


responsiveBaseElement

Тип: DOM element По умолчанию: window

Вешается на любой DOM элемент. Если вы хотите поддержку старых браузеров (например ie8) вешайте его на главный оберточный элемент (wrapper). Это должно предупредить неадекватный ресайз.


video

Тип: Boolean По умолчанию: false

Включение\отключение поддержки в слайдере видео (youtube\vimeo\Vzaar)


videoHeight

Тип: Number/Boolean По умолчанию: false

Установка высоты видео.


videoWidth

Тип: Number/Boolean По умолчанию: false

Установка ширины видео.


animateOut

Тип: String/Boolean По умолчанию: false

CSS класс для анимации «out».


animateIn

Тип: String/Boolean По умолчанию: false

CSS класс для анимации «in».


fallbackEasing

Тип: String По умолчанию: swing

Смягчение (?) CSS2 $.animate.


info

Тип: Function По умолчанию: false

Обратны вызов для извлечение базовой информации (текущий элемент/страницы/ширины).


nestedItemSelector

Тип: String/Class По умолчанию: false

Используйте если элемент слайдера глубоко вложен в генерируемый контент, например ‘myitem’. Не используйте точку перед названием класса.


itemElement

Тип: String По умолчанию: div

Тип DOM элемента слайдера.


stageElement

Тип: String По умолчанию: div

Тип DOM элемента owl-stage.


Тип: String/Class/ID/Boolean По умолчанию: false

Установка своего контейнера для навигации.


dotsContainer

Тип: String/Class/ID/Boolean По умолчанию: false

Установка своего контейнера для навигации по точкам.


checkVisible

Тип: Boolean По умолчанию: true

Если вы знаете карусели всегда будет видно, можешь проверить видимость` на `false`, чтобы предотвратить дорогостоящий макет браузера заставили оплавления $элемент.это ('видимые') делает.

 

Пример использования с параметрами

$(document).ready(function() {
            $('.owl-carousel').owlCarousel({
                loop:true, //Зацикливаем слайдер или карусель
                margin:30, //Отступ от элемента справа в пикселях(px)
                nav:true, //Включение навигации
                autoplay:true, //Автозапуск
                smartSpeed:1000, //Скорость движения слайда
                autoplayTimeout:2000, //Скорость смены слайда
                responsive:{ //Адаптивность. Кол-во выводимых элементов при определенной ширине. От 0 до 600 1 элемент, от 600 до 1000 2 элемента и т.д.
                    0:{
                        items:1
                    },
                    600:{
                        items:2
                    },
                    1000:{
                        items:4
                    }
                }
            });
});

Если необходимо реализовать два и больше слайдеров с другими настройками, достаточно вызывать js-функцию сдругим классом или id, и добавить в разметке страницы.

$(document).ready(function() {
            $('.owl-main').owlCarousel({
                loop:true,
                margin:30,
                nav:true,
                autoplay:true,
                smartSpeed:1000,
            });
});