Owl carousel как настроить

OWL Carousel — популярный jQuery плагин + настройки для v. 2+

Самый известный из всех jQuery плагинов для созданием «карусели». Идеальный вариант компактного слайдера для любого контента.

Update: Статья обновлена, актуальная версия плагина — 2+. Первая версия не поддерживается автором плагина.

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

На момент написание данной статьи, демо-страница плагина недоступны, и посмотреть OWL Carousel настройки затруднительно. Возможно, в дальнейшем отображение сайта разработчика будет восстановлена. Ну а мы пока предоставим мануал по использованию плагина со средним содержанием.

Установка плагина

Все исходники плагина находятся в официальном архиве из репозитория на Github (ссылка «Скачать» вверху страницы). В нем располагается папка owl-carousel , которая и содержит все необходимые файлы. Рекомендуем извлечь к себе на сервер все файлы из этой папки (кроме, разве что, не компрессированной версии).

Подключаем обязательные файлы стилей и скриптов:

Для версий 1+

Для версий 2+

Разметка HTML (актуальна для обоих версий)

Настройки OWL Carousel не подразумевают под собой какую-то конкретную разметку по коду. Вы можете применять плагин к любым тегам, главное, чтобы сохранялась следующая структура:

Класс owl-carousel в данном фрагменте служит идентификатором для того, чтобы плагин начал обрабатывать блок, как слайдер. Теоретически, все прямые дочерние элементы будут отдельным слайдами.

Начало работы плагина (актуальна для обоих версий)

Для запуска скрипта достаточно просто объявить его:

Все. После этого Вы уже можете увидеть работу слайдера.

OWL Carousel настройки

Чаще всего требуется кастомизировать работу «карусели» и обозначить параметры под себя. Для этого создано большое количество опций, callback`ов, событий и методов. Мы перечислим лишь самые популярные и необходимые. Вот, что использует плагин OWL Carousel по умолчанию:

Для версий плагина 1+

Для версий плагина 2+

В список включены также опции от встроенных плагинов.

Опция	Тип данных	По умолчанию	Описание
items	Number	3	Количество элементов, которые вы хотите увидеть на экране.
margin	Number	0	Отступ в пикселях справа от слайда.
loop	Boolean	false	Бесконечная прокрутка элементов.
center	Boolean	false	Отцентровать элемент. Хорошо работает даже с нечетным количеством элементов.
mouseDrag	Boolean	true	Включение перетягивания слайдов мышью.
touchDrag	Boolean	true	Включение перетягивания слайдов на тач-скрине.
pullDrag	Boolean	true	Возможность тянуть слайды за границы.
freeDrag	Boolean	false	Тоже, только к отдельному слайду.
stagePadding	Number	0	Отступы слева и справа (чтобы видеть соседние слайды).
merge	Boolean	false	Слияние элементов. Ищет data-merge=’’ внутрли элемента…
mergeFit	Boolean	true	Выбираются объединенные элементы, если экран меньше, чем значение элемента.
autoWidth	Boolean	false	Автоматический подбор ширины. Попробуйте использовать свойства ширины в атрибуте style.
startPosition	Number/String	0	Стартовая позиция или URL хэш-строка ‘#id’.
URLhashListener	Boolean	false	Реагировать на изменение хэша URL.
nav	Boolean	false	Выводит кнопки вперед\назад.
rewind	Boolean	true	Вернуться назад, когда граница карусели достигнута.
navText	Array	[‘next’,’prev’]	Текст для кнопок. Поддерживает HTML.
navElement	String	div	Тип элемента DOM для одной направленной навигационной ссылки.
slideBy	Number/String	1	Навигация по слайдам x.’страница’.
dots	Boolean	true	Показывать точки навигации.
dotsEach	Number/Boolean	false	Показывать точки каждого элемента X.
dotData	Boolean	false	Использование data-dot содержимого.
lazyLoad	Boolean	false	«Ленивая» загрузка изображений.
autoplay	Boolean	false	Автовоспроизведение.
autoplayTimeout	Number	5000	Задержка для автовоспроизведения.
autoplayHoverPause	Boolean	false	Пауза при наведении.
smartSpeed	Number	250	Рассчет скорости. Бета.
fluidSpeed	Boolean	Number	Рассчет скорости. Бета.
autoplaySpeed	Number/Boolean	false	Скорость автовоспроизведения.
navSpeed	Number/Boolean	false	Скорость навигации.
dotsSpeed	Boolean	Number/Boolean	Скорость пагинации.
dragEndSpeed	Number/Boolean	false	Скорость при «отпускании» слайда.
callbacks	Boolean	true	Включение событий коллбеков.
responsive	Object	empty object	Объект для опций адаптивности.
responsiveRefreshRate	Number	200	Адаптивная частота обновления.
responsiveBaseElement	DOM element	window	Указывает на любой DOM элемент.
video	Boolean	false	Включение выборки с видео-сервисов.
videoHeight	Number/Boolean	false	Установка высоты для видео.
videoWidth	Number/Boolean	false	Установка ширины для видео.
animateOut	String/Boolean	false	Класс для CSS3 анимации исчезновения.
animateIn	String/Boolean	false	Класс для CSS3 анимации появления.
info	Function	false	Обратный вызов для получения базовой информации (текущий элемент/страница/ширина).
nestedItemSelector	String/Class	false	Используйте его, если элементы карусели глубоко вложены в какой-то сгенерированный контент. Не используйте точку перед именем класса.
itemElement	String	div	Тип DOM-элемента для слайда.
stageElement	String	div	Тип DOM-элемента для шага прокрутки.
navContainer	String/Class/ID/Boolean	false	Устанавливает ваш собственный контейнер для навигации.
dotsContainer	String/Class/ID/Boolean	false	Устанавливает ваш собственный контейнер для пагинации.

Скачать плагин версии 2+ можно по ссылке выше.

В случае, если вам нужно посмотреть демо страницу версии 1+, то ее сохранённую копию можно посмотреть из интернет-архива — http://web.archive.org/web/20161022044941/http://owlgraphic.com/owlcarousel/

Там Вы найдете подробные OWL Carousel настройки, а также все возможные примеры использования плагина.

Источник

Owl carousel как настроить

Events are provided by Owl Carousel in strategic code locations. This gives you the ability to listen for any changes and perform your own actions.

You could also trigger events by yourself to control Owl Carousel:

Callbacks

Instead of attaching an event handler you can also just add a callback to the options of Owl Carousel.

Each event passes very useful information within the event object . Based on the example above:

Carousel

initialize.owl.carousel

Type: attachable
Callback: onInitialize

When the plugin initializes.

initialized.owl.carousel

Type: attachable
Callback: onInitialized

When the plugin has initialized.

resize.owl.carousel

Type: attachable
Callback: onResize

When the plugin gets resized.

resized.owl.carousel

Type: attachable
Callback: onResized

When the plugin has resized.

refresh.owl.carousel

Type: attachable, cancelable, triggerable
Callback: onRefresh
Parameter: [event, speed]

When the internal state of the plugin needs update.

refreshed.owl.carousel

Type: attachable
Callback: onRefreshed

When the internal state of the plugin has updated.

drag.owl.carousel

Type: attachable
Callback: onDrag

When the dragging of an item is started.

dragged.owl.carousel

Type: attachable
Callback: onDragged

When the dragging of an item has finished.

translate.owl.carousel

Type: attachable
Callback: onTranslate

When the translation of the stage starts.

translated.owl.carousel

Type: attachable
Callback: onTranslated

When the translation of the stage has finished.

change.owl.carousel

Type: attachable
Callback: onChange
Parameter: property

When a property is going to change its value.

changed.owl.carousel

Type: attachable
Callback: onChanged
Parameter: property

When a property has changed its value.

next.owl.carousel

Type: triggerable
Parameter: [speed]

Goes to next item.

prev.owl.carousel

Type: triggerable
Parameter: [speed]

Goes to previous item.

to.owl.carousel

Type: triggerable
Parameter: [position, speed]

Goes to position.

destroy.owl.carousel

replace.owl.carousel

Type: triggerable
Parameter: data

Removes current content and add a new one passed in the parameter.

add.owl.carousel

Type: triggerable
Parameter: [data, position]

Adds a new item on a given position.

remove.owl.carousel

Type: triggerable
Parameter: position

Removes an item from a given position.

load.owl.lazy

Type: attachable
Callback: onLoadLazy

When lazy image loads.

loaded.owl.lazy

Type: attachable
Callback: onLoadedLazy

When lazy image has loaded.

Autoplay

play.owl.autoplay

Type: triggerable
Parameter: [timeout, speed]

stop.owl.autoplay

Video

stop.owl.video

Type: attachable
Callback: onStopVideo

When video has unloaded.

play.owl.video

Type: attachable
Callback: onPlayVideo

Источник

Owl carousel как настроить

List including all options from built-in plugins video, lazyload, autoheight and animate.

items

Type: Number
Default: 3

The number of items you want to see on the screen.

margin

Type: Number
Default: 0

margin-right(px) on item.

Type: Boolean
Default: false

Infinity loop. Duplicate last and first items to get loop illusion.

center

Type: Boolean
Default: false

Center item. Works well with even an odd number of items.

mouseDrag

Type: Boolean
Default: true

Mouse drag enabled.

touchDrag

Type: Boolean
Default: true

Touch drag enabled.

pullDrag

Type: Boolean
Default: true

Stage pull to edge.

freeDrag

Type: Boolean
Default: false

Item pull to edge.

stagePadding

Type: Number
Default: 0

Padding left and right on stage (can see neighbours).

merge

Type: Boolean
Default: false

Merge items. Looking for data-merge=’‘ inside item..

mergeFit

Type: Boolean
Default: true

Fit merged items if screen is smaller than items value.

autoWidth

Type: Boolean
Default: false

Set non grid content. Try using width style on divs.

startPosition

Type: Number/String
Default: 0

Start position or URL Hash string like ‘#id’.

URLhashListener

Type: Boolean
Default: false

Listen to url hash changes. data-hash on items is required.

Type: Boolean
Default: false

Show next/prev buttons.

rewind

Type: Boolean
Default: true

Go backwards when the boundary has reached.

navText

Type: Array
Default: [‘next’,’prev’]

navElement

Type: String
Default: div

DOM element type for a single directional navigation link.

slideBy

Type: Number/String
Default: 1

Navigation slide by x. ‘page’ string can be set to slide by page.

slideTransition

Type: String
Default: «

You can define the transition for the stage you want to use eg. linear.

Type: Boolean
Default: true

Show dots navigation.

dotsEach

Type: Number/Boolean
Default: false

Show dots each x item.

dotsData

Type: Boolean
Default: false

Used by data-dot content.

lazyLoad

Type: Boolean
Default: false

Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not

lazyLoadEager

Type: Number
Default: 0

Eagerly pre-loads images to the right (and left when loop is enabled) based on how many items you want to preload.

autoplay

Type: Boolean
Default: false

autoplayTimeout

Type: Number
Default: 5000

Autoplay interval timeout.

autoplayHoverPause

Type: Boolean
Default: false

Pause on mouse hover.

smartSpeed

Type: Number
Default: 250

Speed Calculate. More info to come..

fluidSpeed

Type: Boolean
Default: Number

Speed Calculate. More info to come..

autoplaySpeed

Type: Number/Boolean
Default: false

navSpeed

Type: Number/Boolean
Default: false

dotsSpeed

Type: Boolean
Default: Number/Boolean

dragEndSpeed

Type: Number/Boolean
Default: false

callbacks

Type: Boolean
Default: true

Enable callback events.

responsive

Type: Object
Default: empty object

Object containing responsive options. Can be set to false to remove responsive capabilities.

responsiveRefreshRate

Type: Number
Default: 200

Responsive refresh rate.

responsiveBaseElement

Type: DOM element
Default: window

Set on any DOM element. If you care about non responsive browser (like ie8) then use it on main wrapper. This will prevent from crazy resizing.

video

Type: Boolean
Default: false

Enable fetching YouTube/Vimeo/Vzaar videos.

videoHeight

Type: Number/Boolean
Default: false

Set height for videos.

videoWidth

Type: Number/Boolean
Default: false

Set width for videos.

animateOut

Type: String/Boolean
Default: false

Class for CSS3 animation out.

animateIn

Type: String/Boolean
Default: false

Class for CSS3 animation in.

fallbackEasing

Type: String
Default: swing

Easing for CSS2 $.animate.

Type: Function
Default: false

Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference.

nestedItemSelector

Type: String/Class
Default: false

Use it if owl items are deep nested inside some generated content. E.g ‘youritem’. Dont use dot before class name.

itemElement

Type: String
Default: div

DOM element type for owl-item.

stageElement

Type: String
Default: div

DOM element type for owl-stage.

navContainer

Type: String/Class/ID/Boolean
Default: false

Set your own container for nav.

dotsContainer

Type: String/Class/ID/Boolean
Default: false

Источник