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'
}
Preview:
Changelog:
04/14/2023
- v3: Supports Vue 3 & Vue 2
10/11/2021
- v2.2.1: chore: update reference
08/24/2021
- v2.2.0: Update and bugfix
06/10/2021
- v2.1.0
04/18/2021
- v2.0.3
Download Details:
Author: Aaron00101010
Live Demo: https://codesandbox.io/s/elegant-bardeen-n6lg2?file=/src/App.vue
Download Link: https://github.com/Aaron00101010/vue-split-carousel/archive/refs/heads/master.zip
Official Website: https://github.com/Aaron00101010/vue-split-carousel
Install & Download:
# NPM
$ npm i vue-split-carousel