Слайдер изображений Owl Carousel 2

В этой статье мы рассмотрим настройку и установку новой версии адаптивного слайдера изображений 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мс. Думаю, это самая оптимальная скорость, но под свои нужды вы можете изменить ее.

Не все параметры плагина можно использовать в адаптивном виде, ниже список доступных.