В этой статье мы рассмотрим настройку и установку новой версии адаптивного слайдера изображений Owl Carousel 2 работающую на всех устройствах.

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

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

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

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

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

Новые возможности

  • Бесконечное перелистывание
  • Выравнивание элементов по центру
  • Умная скорость перелистывания
  • Настраиваемые отступы между элементами
  • Полностью настраиваемый адаптивный вид
  • Различная высота элементов
  • Обратный вызов при определенном событии
  • Поддержка RTL
  • Поддержка видеохостингов YouTube/Vimeo (с извлечением превью видео)
  • Якоря для навигации
  • Совмещение элементов
  • и много другое...

Совместимость

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
Owl Carousel 2.3.4
Скомпилированная и уменьшенная версия. Файлы плагина, изображения и CSS стили включены.

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

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


<!-- Основной файл стилей -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
 
<!-- Тема по умолчанию -->
<link rel="stylesheet" href="owl-carousel/owl.theme.default.min.css">
 
<!--  Библиотека jQuery 1.7+  -->
<script src="jquery-1.9.1.min.js"></script>
 
<!-- Сам плагин слайдера -->
<script src="owl-carousel/owl.carousel.js"></script>

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

Никакой специальной HTML разметки не требуется для работы слайдера. Все что вам нужно сделать это обернуть блоки в div теги (owl работает с любым типом элементов) внутри контейнера <div class="owl-carousel">. Класс "owl-carousel" является обязательным, иначе будут неверно присвоены стили из файла owl.carousel.css.


Вызов плагина

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

$(document).ready(function() {
  $("#owl-example").owlCarousel();
});
Адаптивный слайдер изображений Owl Carousel Slider. Имеет достаточно большое количество настроек, прост в установке и работе.

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

В этом примере я установил следующие опции: loop:true (бесконечное перелистывание), margin:10 (отступ со всех сторон) и nav:true (кнопки навигации). Плагин работает со всеми типами DOM элементов. Во всех примерах используется элемент <div class="item">...</div>, но вы можете использовать какой либо другой элемент div/span/a/img.

Адаптивный формат карусели изображений

Параметр responsive позволяет задавать количество и размер элементов на странице в зависимости от ширины окна браузера. Попробуйте изменить ширину браузера, чтобы увидеть, что происходит с элементами и кнопками навигации.
responsive : {
    // Ширина окна браузера от 0 и больше
    0 : {
        option1 : value,
        option2 : value,
        ...
    },
    // Ширина окна браузера от 480 и больше
    480 : {
        option1 : value,
        option2 : value,
        ...
    },
    // Ширина окна браузера от 768 и больше
    768 : {
        option1 : value,
        option2 : value,
        ...
    }
}

Что нужно знать об адаптивном слайдере Owl Carousel 2

  • Ширина окна браузера задается только в цифровом виде (как в примере): '480'.
  • Слайдер Owl Carousel имеет встроенную поддержку сортировки параметров ширины браузера, но лучше указывать ширину по по возрастанию начиная от самого маленького экрана до самого широкого.
  • Значения в опции responsive всегда имеют приоритет перед раннее установленными параметрами отображения.
  • Для разных устройств или разрешений экрана можно задать любой вид отображения слайдера, включить или выключить навигацию и т.д.
  • По умолчанию опция responsive включена и слайдер элементов растягивается на всю ширину родительского элемента (даже если не поддерживаются CSS3 media queries в браузерах IE7/IE8 и т. п.).
  • Если вам необходимо отключить адаптивный показ слайдера установите следующее значение опции responsive:false.
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop: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