Меля Крупников

Меля Крупников

Обычный блог представителя человеческой расы, frontend разработчика и просто любителя найти приключений на свою жопу.

Russia, Khabarovsk

Рубрики

post-thumb

#длясамыхмаленьких — Установка и настройка слайдера Owl Carousel 2 на сайт

Веб-разработка · Сентябрь 16, 2016 в 8:55 пп

А вот и подоспела очередная рубрика в моем блоге — #длясамыхмаленьких . В ней я буду рассказывать вам о простых вещах из мира веб-разработки доступным языком (попытаюсь во всяком случае). Сегодня мы поговорим о такой банальной вещи как слайдер. Скорее всего на подавляющем количестве сайтов в том или ином виде присутствует этот элемент. Он позволяет запихать большой объем данных в ограниченное по размеру место, да и в целом способов его применения масса.

За свою жизнь я перепробовал кучу всевозможных слайдеров и в качестве основного у меня всегда был «FlexSlider 2» до того момента пока я не попробовал героя нашей сегодняшней записи — Owl Carousel 2.


Owl Carousel 2 — Гибкий, приятный и удобный в использовании слайдер. Он интуитивно понятно себя ведет, адаптивен, замечательно себя чувствует на любых платформах и разрешениях. Использовать его в работе — одно удовольствие.

Установка Owl Carousel 2

Собсно для начала нам нужно его скачать. Пакет доступен из npm и bower:

npm npm install --save owl.carousel

bower bower install --save owl.carousel

Если вы не хипстер используете пакетные менеджеры, то можно скачать с гитхаба в разделе релизов: Скачать Owl Carousel 2

На момент написания статьи актуальная версия 2.1.6 и в качестве примера я буду использовать ее.

Само собой нам так же понадобиться jQuery.


Подключаем

Скачав и распаковав Owl Carousel 2 нам нужно его подключить. Для этого в <head> добавляем стили:

<link rel="stylesheet" href="Путь-до-папки-со-стилями/owl.carousel.min.css" />

Если вам лень писать свои стили для внешнего вида слайдера, то можете подключить CSS файл со стандартной темой от разработчиков.

<link rel="stylesheet" href="Путь-до-папки-со-стилями/owl.theme.default.css" />

И внизу страницы подключаем непосредственно саму js’ку. АЛЯРМА! Owl Carousel должен подключаться после jQuery!

<script src="Путь-до-папки-с-js/owl.carousel.min.js"></script>


Используем

Добавляем в нужное вам место на странице блок со слайдером

<div class="owl-carousel owl-theme">
    <div> Контент </div>
    <div> Контент </div>
    <div> Контент </div>
    <div> Контент </div>
    <div> Контент </div>
    <div> Контент </div>
    <div> Контент </div>
</div>

Содержимым слайдера может выступать что угодно. Картинки, текст, списки, видео, все на что хватит вашей фантазии, но оно обязательно должно быть обернуто в контейнер (Например <div> или <ul>)

Если вы не используете стандартную тему (owl.theme.default.css) то класс owl-theme добавлять не нужно.

Теперь просто вызываем функцию плагина (добавляем следующий код в конце странице, после подключения owl.carousel.min.js)

<script>$(document).ready(function(){
$('.owl-carousel').owlCarousel();
});</script>

Если у вас уже есть вызовы других функций по (document).ready, то можно просто к ним добавить  $('.owl-carousel').owlCarousel();)


Все! Карусель установлена и функционирует. Вы молодец!

Настраиваем и расширяем функционал

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

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

Дабы предупредить некоторые глупые вопросы у людей которые не знают ничего о типах данных — сделаю небольшой дисклеймер. В таблице приведен параметр и тип значения в котором нужно его указывать. Тип Number используется как ни странно для числовых значений, как целых так и дробных (например 1, 5, 80). Тип Boolean является булевым и имеет два значения — true (истина) или false (ложь) (грубо говоря да\нет). String это строчный тип данных, в который вы можете записывать любую строку (оборачивается как в одинарные так и в двойные кавычки). Так же в параметр можно передавать и другие данные, например массивы (Array) или же целые функции.

Документация по API Owl Carousel 2 на русском

Параметр Тип Стандартное значение Описание
items Number 3 Кол-во отображаемых элементов в слайдере
margin Number 0 Отступ справа у элементов внутри слайдера (значение в px)
loop Boolean false Бесконечное зацикливание слайдера (для лучшего эффекта продублируйте первый и последний элемент)
center Boolean false Позиционирование элементов по центру (лучше работает при нечетном кол-ве элементов)
mouseDrag Boolean true Перелистывание элементов зажатой мышкой
touchDrag Boolean true Перелистывание касанием (смартфоны\планшеты)
pullDrag Boolean true Stage pull to edge.
freeDrag Boolean false Item pull to edge.
stagePadding Number 0 Padding left and right on stage (can see neighbours).
merge Boolean false Merge items. Looking for data-merge='{number}’ inside item..
mergeFit Boolean true Fit merged items if screen is smaller than items value.
autoWidth Boolean false Размещение элементов не сеткой (Задайте высоту каждому диву)
startPosition Number/String 0 Стартовая позиция (?) или URL хэш (Например «#id»)
URLhashListener Boolean false Отслеживание изменений URL хэша (Хэш должен присутствовать на каждом элементе)
nav Boolean false Отображение кнопок вперед\назад
navText Array Текст на кнопках навигации. HTML разрешен.
navElement String div Тип DOM элемента для навигационной ссылки в одну сторону.
slideBy Number/String 1 Пролистывание слайдера по оси X. Значение ‘page’ позволяет сделать навигацию по странице.
dots Boolean true Отображение навигационных «точек»
dotsEach Number/Boolean false Отображение навигационных «точек» ‘x’ кол-во элементов
dotData Boolean false Используется data-dot контентом
lazyLoad Boolean false Lazy-Load картинок. data-src и data-src-retina указываются для высоких разрешений. Так же загружает изображение инлайново в свойство background если элемент не является <img>
lazyContent  Вырезано из финальной версии, но разработка все еще ведется.
autoplay Boolean false Автоматическое пролистывание
autoplayTimeout Number 5000 Интервалы между пролистыванием элементов
autoplayHoverPause Boolean false Останавливает автопроигрывание если навести мышкой (hover) на элемент
smartSpeed Number 250 Просчитывание скорости (В оф. документации больше информации нет)
fluidSpeed Number
autoplaySpeed Number/Boolean false Скорость автоматического пролистывания
navSpeed Number/Boolean false Скорость навигации
dotsSpeed Number/Boolean Скорость навигации «точками»
dragEndSpeed Number/Boolean false Drag end speed.
callbacks Boolean true Включение\отключение колбэк ивентов.
responsive Object empty object Объект содержит в себе настройки для адаптивности. Если установить значение в false — поддержка адаптивности отключается.
responsiveRefreshRate Number 200 Responsive refresh rate.
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»
animateInClass 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.
navContainer String/Class/ID/Boolean false Установка своего контейнера для навигации
dotsContainer String/Class/ID/Boolean false Установка своего контейнера для навигации по «точкам»

Вот пример моего вызова Owl Carousel 2 с комментариями:

 

Чтобы сделать два или несколько слайдеров на сайте с помощью Owl Carousel 2 достаточно просто вызывать функцию не по классу а по id (как в моем примере), и не забудьте их расставить непосредственно в разметке страницы.


На этом собственно все, если у вас останутся какие-то вопросы — задавайте их в комментариях. Удачи!

 

  • Александр Доминантов

    Добрый день. а можно ли как то заставить слайдер увеличивать картинки по клику?
    спасибо.

    • Меля Крупников

      Доброго времени суток! Если вопрос еще актуален — конечно же можно. В Owl Carousel можно засунуть что угодно, поищите плагины для увеличения картинок по клику, или же напишите сами 🙂

      • Александр Доминантов

        это я уже сделал, интересовало есть ли в слайдере увеличение. уже понял, что нет. спасибо.

  • Safe Mode

    А кроме стандартных управляющих элементов есть ли еще какие-то классы встроенные, или самому все?)

  • Irina

    Огромное спасибо, статья очень помогла разобраться!

  • Orseron

    Доброго дня. Пытаюсь прикрутить функции кнопок next и prev к дивам с картинками. Вот такой код (но почему-то не работает):

    $(document).ready(function(){
    var owl_review = $(«.owl-carousel»);

    owl_review.owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    smartSpeed: 1000,
    nav: true,
    dots: false,
    }
    );

    $(«.next-image»).click(function() {
    owl_review.trigger(«owl.next»);
    });

    $(«.prev-image»).click(function() {
    owl_review.trigger(«owl.prev»);
    });
    });

    • Михаил Лазарев

      Вместо owl_review.trigger(«owl.prev»); и owl_review.trigger(«owl.next»);
      попробуйте owl.trigger(‘prev.owl.carousel’); и owl.trigger(‘next.owl.carousel’);

  • Максим Печкин

    Добрый день. А как сделать не перелстиывание слайдов, а так чтобы они плавно сменяли друг друга эффектом fadeIn. У меня автоматическая прокрутка

  • Александр

    Добрый вечер!
    Подскажите, как сделать чтобы при нажатии кнопки на слайде(выборе кнопки radio) слайд автоматически переходил на следующий?
    Спасибо!