items |
number |
3 |
The number of items you want to see on the screen. |
margin |
number |
0 |
margin-right(px) on item. |
loop |
bool |
false |
Infinity loop. Duplicate last and first items to get loop illusion. |
center |
bool |
false |
Center item. Works well with even an odd number of items. |
mouseDrag |
bool |
true |
Mouse drag enabled. |
touchDrag |
bool |
true |
Touch drag enabled. |
pullDrag |
bool |
true |
Stage pull to edge. |
freeDrag |
bool |
false |
Item pull to edge. |
stagePadding |
number |
0 |
Padding left and right on stage (can see neighbours). |
merge |
bool |
false |
Merge items. Looking for data-merge='{number}' inside item.. |
mergeFit |
bool |
true |
Fit merged items if screen is smaller than items value. |
autoWidth |
bool |
false |
Set non grid content. Try using width style on divs. |
startPosition |
number/string |
0 |
Start position or URL Hash string like '#id'. |
URLhashListener |
bool |
false |
Listen to url hash changes. data-hash on items is required. |
nav |
bool |
false |
Show next/prev buttons. |
rewind |
bool |
true |
Go backwards when the boundary has reached. |
navText |
[dom element] |
['next','prev'] |
HTML allowed. |
navElement |
string |
'div' |
DOM element type for a single directional navigation link. |
slideBy |
number/string |
1 |
Navigation slide by x. 'page' string can be set to slide by page. |
dots |
bool |
true |
Show dots navigation. |
dotsEach |
number/bool |
false |
Show dots each x item. |
dotData |
bool |
false |
Used by data-dot content. |
lazyLoad |
bool |
false |
Lazy load images. data-src and data-src-retina for highres. Also load images into background inline style if element is not <img> |
lazyContent |
bool |
false |
lazyContent was introduced during beta tests but i removed it from the final release due to bad implementation. It is a nice options so i will work on it in the nearest feature. |
autoplay |
bool |
false |
Autoplay. |
autoplayTimeout |
number |
5000 |
Autoplay interval timeout. |
autoplayHoverPause |
bool |
false |
Pause on mouse hover. |
smartSpeed |
number |
250 |
Speed Calculate. More info to come.. |
fluidSpeed |
number |
|
Speed Calculate. More info to come.. |
autoplaySpeed |
number/bool |
false |
autoplay speed. |
navSpeed |
number/bool |
false |
Navigation speed. |
dotsSpeed |
number/bool |
|
Pagination speed. |
dragEndSpeed |
number/bool |
false |
Drag end speed. |
callbacks |
bool |
true |
Enable callback events. |
responsive |
object |
empty object |
Object containing responsive options. Can be set to false to remove responsive capabilities. |
responsiveRefreshRate |
number |
200 |
Responsive refresh rate. |
responsiveBaseElement |
dom element |
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 |
bool |
false |
Enable fetching YouTube/Vimeo/Vzaar videos. |
videoHeight |
number/bool |
false |
Set height for videos. |
videoWidth |
number/bool |
false |
Set width for videos. |
animateOut |
string/bool |
false |
Class for CSS3 animation out. |
animateIn |
string/bool |
false |
Class for CSS3 animation in. |
fallbackEasing |
string |
swing |
Easing for CSS2 $.animate. |
info |
function |
false |
Callback to retrieve basic information (current item/pages/widths). Info function second parameter is Owl DOM object reference. |
nestedItemSelector |
string |
false |
Use it if owl items are deep nested inside some generated content. E.g 'youritem'. Dont use dot before class name. |
itemElement |
string |
'div' |
DOM element type for owl-item. |
stageElement |
string |
'div' |
DOM element type for owl-stage. |
navContainer |
string/bool |
false |
Set your own container for nav. |
dotsContainer |
string/bool |
false |
Set your own container for dots. |