Vue Split Carousel
A carousel component for vue,meanwhile display several carousel item.
2.x version for vue 3
1.x version for vue 2
Playground
Browser Compatibility
Modern browser, follow vue 3 compatibility.
Component Structure
Use <split-carousel-item> in <split-carousel>,put your custom content in split-carousel-item.
<split-carousel>
<split-carousel-item>
custom content
</split-carousel-item>
<split-carousel-item>
custom content2
</split-carousel-item>
</split-carousel>Install
# use npm
npm i vue-split-carousel
# use yarn
yarn add vue-split-carouselsupport prefix option prevent name conflict while install component with app.use
Local Component
<template>
<div id="app">
<split-carousel>
<split-carousel-item v-for="item in 8" :key="item">
{{ item }}
</split-carousel-item>
</split-carousel>
</div>
</template>
<script>
import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel";
export default {
components: {
SplitCarousel,
SplitCarouselItem
}
};
</script>Global Component
import Vue from "vue";
import App from "./App.vue";
import SplitCarousel from "vue-split-carousel";
const app = createApp(App);
app.use(SplitCarousel);
//accpect prefix for component name conflict, use as `<ElSplitCarousel>` and `<ElSplitCarouselItem>`
//app.use(SplitCarousel,{prefix:'El'});
app.mount("#app");import by <script>
can use vue-split-carousel.min.umd.js in the dist folder.
<div id="app"></div>
<script src="https://unpkg.com/vue@next"></script>
<script src="./vue-split-carousel.umd.min.js"></script>
<script>
const app = Vue.createApp({
template:`
<split-carousel>
<split-carousel-item v-for="i in 8">{{i}}</split-carousel-item>
</split-carousel>
`
})
app.use(window['vue-split-carousel'])
app.mount('#app')
</script>Props
| Attribute | Description | Type | Accpected Values | Default |
|---|---|---|---|---|
| speed | transition duration of carousel item, in milliseconds | Number | - | 500 |
| autoplay | whether automatically switch carousel items | Boolean | - | true |
| interval | interval of switch carousel items, in milliseconds | Number | - | 3000 |
| loop | whether display carousel items in loop | Boolean | - | true |
| display-amount | the amount of carousel items display in carousel container | Number | - | 4 |
| item-width | the width of carousel items | Number | - | 120 |
| height | height of carousel, if the prop value type is number,the unit is px by default. you can pass string value to use other unit, eg: 40vh |
Number/String | - | 80 |
| timing-function | the animation effect of carousel item,reference transition-timing-function | String | - | ease |
| pause-on-hover | whether pause autoplay while mouse hover | Boolean | - | true |
| arrow-visible | whether arrow visiable, avaliable when loop set to false |
String | default/always | default |
Slots
| Name | Descrition |
|---|---|
| left | customize left arrow |
| right | customize right arrow |