Содержание
Please complete the security check to access codepen.io
Why do I have to complete a CAPTCHA?
Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.
What can I do to prevent this in the future?
If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.
If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.
Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.
Cloudflare Ray ID: 5567b3dc7de4974e • Your IP : 91.146.8.87 • Performance & security by Cloudflare
Overview
Responsive option can be used for setting breakpoints and additional options within. Try changing your browser width to see what happens with Items and Navigations.
About responsive option
Setting of the responsive is very simple. Structure of responsive option:
Key facts:
- Each breakpoint key can be a Number value (like in example) or a string: ‘480’.
- Owl has an in-built sort option but it’s best to set from the smallest screens to the widest.
- Responsive options always overwrite top level settings.
- As default, the responsive option is set to true so carousel always tries to fit the wrapper (even if media queries are not support IE7/IE8 etc).
- If you have non flexible layout then set responsive:false .
Live Example
responsiveClass
Optional helper class. Add ‘owl-reponsive-‘ + ‘breakpoint’ class to main element.
responsiveBaseElement
As default all responsive breakpoints are corresponding with window width. This option gives you an opportunity to change it to your own class/id like responsiveBaseElement:".myCustomWrapper"
responsiveRefreshRate
What this does is wait 200ms after you changed the browser width and performs refresh actions (calculating widths/ cloning items etc.) Default refresh rate is 200ms. I think this rate is optimal but you can change it if it’s to slow for you.
As not every option is able to use responsive abilities, here’s a full list of responsive options.
Веб-разработка · 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 нам нужно его подключить. Для этого в добавляем стили:
Если вам лень писать свои стили для внешнего вида слайдера, то можете подключить CSS файл со стандартной темой от разработчиков.
И внизу страницы подключаем непосредственно саму js’ку. АЛЯРМА! Owl Carousel должен подключаться после jQuery!
Используем
Добавляем в нужное вам место на странице блок со слайдером
Содержимым слайдера может выступать что угодно. Картинки, текст, списки, видео, все на что хватит вашей фантазии, но оно обязательно должно быть обернуто в контейнер (Например
Если вы не используете стандартную тему (owl.theme.default.css) то класс owl-theme добавлять не нужно.
Теперь просто вызываем функцию плагина (добавляем следующий код в конце странице, после подключения owl.carousel.min.js)
Если у вас уже есть вызовы других функций по (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 | Отступ справа у элементов внутри слайдера (значение в 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 | Padding left and right on stage (can see neighbours). | |
| merge | Boolean | false | Merge items. Looking for data-merge=’ |
| mergeFit | Boolean | true | Fit merged items if screen is smaller than items value. |
| autoWidth | Boolean | false | Размещение элементов не сеткой (Задайте высоту каждому диву) |
| startPosition | Number/String | Стартовая позиция (?) или 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 если элемент не является |
| 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 | Включениеотключение поддержки в слайдере видео (youtubevimeoVzaar) |
| 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 (как в моем примере), и не забудьте их расставить непосредственно в разметке страницы.
На этом собственно все, если у вас останутся какие-то вопросы — задавайте их в комментариях. Удачи!