Vue的多功能，高度可定制的轮播组件。

安装和下载：

# NPM
$ npm i vue-split-carousel

如何使用它：

1.导入并注册拆分后的转盘组件。

// 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.将split-carousel组件添加到应用模板中，并按如下所示在轮播中插入尽可能多的项目：

<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.可用的组件道具。

/* 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'
}

变更日志：

06/10/2021

• v2.1.0

2021/04/18

• v2.0.3