vue-owl-carousel2

2.0.7 • Public • Published

npm


Intro

Installation

npm i -s vue-owl-carousel2 or yarn add vue-owl-carousel2

Usage

<script>

import carousel from 'vue-owl-carousel2'

export default {
    components: { carousel },
}

</script>

Basic Usage

<carousel>

    <img src="https://placeimg.com/200/200/any?1">

    <img src="https://placeimg.com/200/200/any?2">

    <img src="https://placeimg.com/200/200/any?3">

    <img src="https://placeimg.com/200/200/any?4">

</carousel>

Custom prev and next buttons using slot, the buttons will be hidden while start and end in non-loop mode

<carousel>

    <template slot="prev"><span class="prev">prev</span></template>

    //

    <template slot="next"><span class="next">next</span></template>

</carousel>

Set options,

<carousel :autoplay="true" :nav="false">

//

</carousel>

Set events,

<carousel @changed="changed" @updated="updated">

//

</carousel>

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

  • initialize
  • initialized
  • resize
  • resized
  • refresh
  • refreshed
  • update
  • updated
  • drag
  • dragged
  • translate
  • translated
  • to
  • changed

💥 NPM

NPM

Package Sidebar

Install

npm i vue-owl-carousel2

Weekly Downloads

137

Version

2.0.7

License

MIT

Unpacked Size

452 kB

Total Files

14

Last publish

Collaborators

  • mats-dev