Skip to content

AbdallahAlhaddad/vue-owl-carousel

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm


Intro

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 (like rtl), 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.

<template>
  <carousel :events="['initialized', 'changed']" @initialized="intial" @changed="changed">
    //
  </carousel>
  <template />

  <script>
    import carousel from 'xx-vue-owl-carousel'
    export default {
      components: { carousel },
      methods: {
        intial(event) {
          console.log('owl carousel initialized')
          console.log('number of slides:', event.item.count)
          console.log('active slide index:', event.item.index)
        },
        changed(event) {
          //
        },
      },
    }
  </script></template
>
  • removed passing next & prev as named slots. instead pass slideValue prop and create your custom buttons outside the carousel:
<template>
  <carousel :slideValue="slideController">
    //
  </carousel>
  <button @click="slideController++">next</button>
  <button @click="slideController--">prev</button>
</template>

<script>
  import carousel from 'xx-vue-owl-carousel'

  export default {
    components: { carousel },
    data() {
      return {
        slideController: 0,
      }
    },
  }
</script>
  • changed webpack to rollup.

  • (v1.1.9) Added a method to manually re-instantiate the carousel if needed:

<template>
  <carousel ref="carousel">
    //
  </carousel>
</template>

<script>
  export default {
    methods: {
      refreshCarousel() {
        this.$refs.carousel.refresh()
      },
    },
  }
</script>

Installation

npm i -s xx-vue-owl-carousel or yarn add xx-vue-owl-carousel

Usage

<script>
  import carousel from 'xx-vue-owl-carousel'

  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>

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.

About

Vue component for Owl Carousel 2

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 56.9%
  • JavaScript 43.1%