插件名称 | vue-split-carousel |
---|---|
发布时间 | 2021年4月8日 |
插件作者 | Aaron00101010 |
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'
}
官网:https://github.com/Aaron00101010/vue-split-carousel
演示:https://www.vue365.cn/code_demo.php?id=4444
GitHub下载:https://github.com/Aaron00101010/vue-split-carousel/archive/refs/heads/master.zip