Owl Slider Customization options
We have summarized the customization options for Owl Carousels for you in one place. We use Owl carousels, for example, to create infinite sliders that cannot be implemented natively in Webflow.
items
Type: Number
Default: 3
The number of items you want to see on the screen.
Example:
items: 1;
margin
Type: Number
Default: 0
margin-right(px) on item.
Example:
margin: 9px;
loop
Type: Boolean
Default: false
Infinity loop. Duplicate last and first items to get loop illusion.
Example:
loop: true;
center
Type: Boolean
Default: false
Center item. Works well with even an odd number of items.
Example:
center: true;
mouseDrag
Type: Boolean
Default: true
Mouse drag enabled.
Example:
mouseDrag: true;
touchDrag
Type: Boolean
Default: true
Touch drag enabled.
Example:
touchDrag: true;
pullDrag
Type: Boolean
Default: true
Stage pull to edge.
Example:
pullDrag: true;
freeDrag
Type: Boolean
Default: false
Item pull to edge.
Example:
freeDrag: true;
stagePadding
Type: Number
Default: 0
Padding left and right on stage (can see neighbours).
Example:
stagePadding: 16px;
merge
Type: Boolean
Default: false
Merge items. Looking for data-merge='{number}' inside item..
Example:
merge: true;
mergeFit
Type: Boolean
Default: true
Fit merged items if screen is smaller than items value.
Example:
mergeFit: true;
autoWidth
Type: Boolean
Default: false
Set non grid content. Try using width style on divs.
Example:
autoWidth: true;
startPosition
Type: Number/String
Default: 0
Start position or URL Hash string like '#id'.
Example:
startPosition: 1;
URLhashListener
Type: Boolean
Default: false
Listen to url hash changes. data-hash on items is required.
Example:
URLhashListener: true;
nav
Type: Boolean
Default: false
Show next/prev buttons.
Example:
nav: true;
rewind
Type: Boolean
Default: true
Go backwards when the boundary has reached.
Example:
rewind: true;
navText
Type: Array
Default: ['next','prev']
HTML allowed.
Example
navText:["<div class='example-class'></div>","<div class='example-class-2'></div>"],
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.
dots
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 <img>
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
Autoplay.
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
autoplay speed.
navSpeed
Type: Number/Boolean
Default: false
Navigation speed.
dotsSpeed
Type: Boolean
Default: Number/Boolean
Pagination speed.
dragEndSpeed
Type: Number/Boolean
Default: false
Drag end speed.
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.
info
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
Set your own container for nav.
checkVisible
Type: Boolean
Default: true
If you know the carousel will always be visible you can set `checkVisibility` to `false` to prevent the expensive browser layout forced reflow the $element.is(':visible') does.
Are you ready for more?
Thefuturehits Webflow.
Scale your work and grow your business with powerful automation in Webflow.
