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