Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/93gaurav93/v-owl-carousel
🦉 VueJS wrapper for Owl Carousel
https://github.com/93gaurav93/v-owl-carousel
carousel carousel-component carousel-plugin jquery owl-carousel vue vue-component vue-components vuejs vuejs2 wrapper
Last synced: 3 days ago
JSON representation
🦉 VueJS wrapper for Owl Carousel
- Host: GitHub
- URL: https://github.com/93gaurav93/v-owl-carousel
- Owner: 93gaurav93
- License: mit
- Created: 2018-04-21T17:11:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T02:08:43.000Z (almost 2 years ago)
- Last Synced: 2024-09-19T13:31:52.288Z (8 days ago)
- Topics: carousel, carousel-component, carousel-plugin, jquery, owl-carousel, vue, vue-component, vue-components, vuejs, vuejs2, wrapper
- Language: Vue
- Homepage:
- Size: 767 KB
- Stars: 44
- Watchers: 2
- Forks: 25
- Open Issues: 18
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/v-owl-carousel)
---
## Intro
- The [VueJS](https://vuejs.org/) wrapper for [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/).
- [Owl Carousel](https://owlcarousel2.github.io/OwlCarousel2/) is touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.
## Installation
`npm i v-owl-carousel` or `yarn add v-owl-carousel`
## Usage
`import carousel from 'v-owl-carousel'`
```
```
Set options,
```
//
//
```
Set events,
```
//
//
```
## Usage in Nuxt.js
`npm i v-owl-carousel`
Then in your plugins/ directory, create a new file owl.js:
```javascript
import Vue from 'vue'
import OwlCarousel from 'v-owl-carousel'
Vue.component('carousel', OwlCarousel)
```
Then in nuxt.config.js:
```javascript
plugins: [
{src: 'plugins/owl.js', ssr: false} // Only works on client side
], ...
```
And finally in the page or component:
```html
...content
```
## Available options
Currently following options are available.
##### *(More to come)*
- ### 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.
## Events
- ### change
Emitter: carousel
Description: Emits when carousel has changed (changed.owl.carousel)
## :collision: NPM
[](https://www.npmjs.com/package/v-owl-carousel)