Intro
- The VueJS wrapper for Owl Carousel.
-
Owl Carousel is touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
-
Extended from vue-owl-carousel
what has changed in this fork?
-
Added
rtl
prop, can be changed dynamically (the carousel will be re-instantiated in rtl mode and on the same slide location) -
Added
autoHeight
prop -
Due to a bug in the responsive mode, i've added a temporarily fix by allowing
items
prop to be changed dynamically (likertl
), so you can determine the breakpoints and pass corresponding items from your main project. -
Fixed
initialize
&initialized
not being fired up. -
Added a
events
prop that takes an array of the events you want to register instead of registering all library events.
//
- removed passing
next
&prev
as named slots. instead passslideValue
prop and create your custom buttons outside the carousel:
// next prev
-
changed
webpack
torollup
. -
(
v1.1.9
) Added a method to manually re-instantiate the carousel if needed:
//
Installation
npm i -s xx-vue-owl-carousel
or yarn add xx-vue-owl-carousel
Usage
Basic Usage
Set options,
//
Set events,
//
Available options
Currently following options are available.
- ### 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.
- ### loop
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.
- #### nav
Type: Boolean
Default: false
Show next/prev buttons.
- #### autoplay
Type: Boolean
Default: false
Autoplay.
- #### autoplaySpeed
Type: Number/Boolean
Default: false
Autoplay speed.
- #### rewind
Type: Boolean
Default: true
Go backwards when the boundary has reached.
- #### 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).
- #### autoWidth
Type: Boolean
Default: false
Set non grid content. Try using width style on divs.
- #### autoHeight
Type: Boolean
Default: false
Set non grid content. Try using height style on divs.
- #### dots
Type: Boolean
Default: true
Show dots navigation.
- #### autoplayTimeout
Type: Number
Default: 5000
Autoplay interval timeout.
- #### autoplayHoverPause
Type: Boolean
Default: false
Pause on mouse hover.
- #### responsive
Type: Object
Default: {}
Example : :responsive="{0:{items:1,nav:false},600:{items:3,nav:true}}"
Object containing responsive options. Can be set to false to remove responsive capabilities.