Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/s950329/vue-owl-carousel
Vue component for Owl Carousel 2
https://github.com/s950329/vue-owl-carousel
Last synced: 4 months ago
JSON representation
Vue component for Owl Carousel 2
- Host: GitHub
- URL: https://github.com/s950329/vue-owl-carousel
- Owner: s950329
- License: mit
- Created: 2018-10-17T11:39:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T03:37:18.000Z (about 2 years ago)
- Last Synced: 2024-10-30T01:37:42.496Z (4 months ago)
- Language: Vue
- Homepage:
- Size: 177 KB
- Stars: 167
- Watchers: 4
- Forks: 103
- Open Issues: 49
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/vue-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.
- Extended from [vue-owl-carousel](https://github.com/s950329/vue-owl-carousel)
## Installation
`npm i -s vue-owl-carousel` or `yarn add vue-owl-carousel`
## Usage
```
import carousel from 'vue-owl-carousel'
export default {
components: { carousel },
}
```
Basic Usage
```
```
Custom prev and next buttons using slot, the buttons will be hidden while start and end in non-loop mode
```
prev
//
next
```
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.
## Available events
The trigger timing can see [Owl Carousel document](https://owlcarousel2.github.io/OwlCarousel2/demos/events.html)
- initialize
- initialized
- resize
- resized
- refresh
- refreshed
- update
- updated
- drag
- dragged
- translate
- translated
- to
- changed
## :collision: NPM
[](https://www.npmjs.com/package/vue-owl-carousel)