Меню Закрыть

Owl carousel responsive settings

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

Responsive related options:

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.

Читайте также:  Как добавить рингтон на айфон 2018

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 на русском

ПараметрТипСтандартное значениеОписание
itemsNumber3Кол-во отображаемых элементов в слайдере
marginNumberОтступ справа у элементов внутри слайдера (значение в px)
loopBooleanfalseБесконечное зацикливание слайдера (для лучшего эффекта продублируйте первый и последний элемент)
centerBooleanfalseПозиционирование элементов по центру (лучше работает при нечетном кол-ве элементов)
mouseDragBooleantrueПерелистывание элементов зажатой мышкой
touchDragBooleantrueПерелистывание касанием (смартфоныпланшеты)
pullDragBooleantrueStage pull to edge.
freeDragBooleanfalseItem pull to edge.
stagePaddingNumberPadding left and right on stage (can see neighbours).
mergeBooleanfalseMerge items. Looking for data-merge=’’ inside item..
mergeFitBooleantrueFit merged items if screen is smaller than items value.
autoWidthBooleanfalseРазмещение элементов не сеткой (Задайте высоту каждому диву)
startPositionNumber/StringСтартовая позиция (?) или URL хэш (Например «#id»)
URLhashListenerBooleanfalseОтслеживание изменений URL хэша (Хэш должен присутствовать на каждом элементе)
navBooleanfalseОтображение кнопок впередназад
navTextArrayТекст на кнопках навигации. HTML разрешен.
navElementStringdivТип DOM элемента для навигационной ссылки в одну сторону.
slideByNumber/String1Пролистывание слайдера по оси X. Значение ‘page’ позволяет сделать навигацию по странице.
dotsBooleantrueОтображение навигационных «точек»
dotsEachNumber/BooleanfalseОтображение навигационных «точек» ‘x’ кол-во элементов
dotDataBooleanfalseИспользуется data-dot контентом
lazyLoadBooleanfalseLazy-Load картинок. data-src и data-src-retina указываются для высоких разрешений. Так же загружает изображение инлайново в свойство background если элемент не является
lazyContentВырезано из финальной версии, но разработка все еще ведется.
autoplayBooleanfalseАвтоматическое пролистывание
autoplayTimeoutNumber5000Интервалы между пролистыванием элементов
autoplayHoverPauseBooleanfalseОстанавливает автопроигрывание если навести мышкой (hover) на элемент
smartSpeedNumber250Просчитывание скорости (В оф. документации больше информации нет)
fluidSpeedNumber
autoplaySpeedNumber/BooleanfalseСкорость автоматического пролистывания
navSpeedNumber/BooleanfalseСкорость навигации
dotsSpeedNumber/BooleanСкорость навигации «точками»
dragEndSpeedNumber/BooleanfalseDrag end speed.
callbacksBooleantrueВключениеотключение колбэк ивентов.
responsiveObjectempty objectОбъект содержит в себе настройки для адаптивности. Если установить значение в false — поддержка адаптивности отключается.
responsiveRefreshRateNumber200Responsive refresh rate.
responsiveBaseElementDOM elementwindowВешается на любой DOM элемент. Если вы хотите поддержку старых браузеров (например ie8) вешайте его на главный оберточный элемент (wrapper). Это должно предупредить неадекватный ресайз.
videoBooleanfalseВключениеотключение поддержки в слайдере видео (youtubevimeoVzaar)
videoHeightNumber/BooleanfalseУстановка высоты видео
videoWidthNumber/BooleanfalseУстановка ширины видео
animateOutString/BooleanfalseCSS класс анимации «out»
animateInClassString/BooleanfalseCSS класс анимации «in»
fallbackEasingStringswingСмягчение (?) CSS2 $.animate.
infoFunctionfalseКолбэк для извлечение базовой информации (текущий элемент/страницы/ширины).
nestedItemSelectorString/ClassfalseИспользуйте если элемент слайдера глубоко вложен в генерируемый контент, например ‘myitem’. Не используйте точку перед названием класса.
itemElementStringdivТип DOM элемента слайдера.
stageElementStringdivТип DOM элемента owl-stage.
navContainerString/Class/ID/BooleanfalseУстановка своего контейнера для навигации
dotsContainerString/Class/ID/BooleanfalseУстановка своего контейнера для навигации по «точкам»
Читайте также:  Где находится видеокарта в ноутбуке acer

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

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

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

Рекомендуем к прочтению

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code

Adblock
detector