Split Carousel Component For Vue

Install & Download:

# NPM
$ npm i vue-split-carousel

Description:

A multi-purpose, highly customizable carousel component for Vue.

How to use it:

1. Import and register the split carousel component.

// locally
import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel";
  export default {
    components: {
      SplitCarousel,
      SplitCarouselItem
    }
    // ...
};
// globally
import SplitCarousel from "vue-split-carousel";
import "vue-split-carousel/dist/vue-split-carousel.css";
Vue.use(SplitCarousel);
new Vue({
  render: h => h(App)
}).$mount("#app");

2. Add the split-carousel component to the app template and insert as many items to the carousel as follows:

<template>
  <div id="app">
    <split-carousel>
      <split-carousel-item v-for="item in 8" :key="item">
        {{ item }}
      </split-carousel-item>
    </split-carousel>
  </div>
</template>

3. Available component props.

/* play */
speed: {
  type: Number,
  default: 500
},
autoplay: {
  type: Boolean,
  default: true
},
hoverCancelPlay: {
  type: Boolean,
  default: true
},
playDirection: {
  default: 'ltr',
  validator (val) {
    return ['rtl', 'ltr'].indexOf(val) !== -1
  }
},
interval: {
  type: Number,
  default: 3000
},
loop: {
  type: Boolean,
  default: true
},
initialIndex: {
  type: Number,
  default: 0
},
/* style unit */
cssUnit: {
  type: String,
  default: 'px'
},
height: {
  type: Number,
  default: 80
},
/* arrow controller */
arrowAreaWidth: {
  type: Number,
  default: 50
},
arrowVisible: {
  type: String,
  default: 'enable',
  validator (value) {
    return ['enable', 'always'].indexOf(value) !== -1
  }
},
/* item */
timingFunction: {
  type: String,
  default: 'ease'
},
displayAmount: {
  type: Number,
  default: 4
},
itemWidth: {
  type: Number,
  default: 120
},
itemAlign: {
  validator (value) {
    return ['center', 'left', 'right'].indexOf(value) !== -1
  },
  default: 'center'
}