中文文档

Vue Split Carousel

!GitHub

A carousel component for vue, meanwhile display several carousel item.
Support Vue3, Vue2.7, Vue2, Nuxt2, Nuxt3 , Script tag import, support Typescript.

!example

Playground

Demo

See the demo in the examples directory
| Vue3 | Vue2.7 | Vue2 | Nuxt2 | Nuxt3 | scripts tag import |
| ----------------------------------- | ------------------------------------- | ----------------------------------- | ---------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Demo | Demo | Demo | Demo | Demo | Vue3 Demo
Vue2.7 Demo
Vue2 Demo |

Install

``bash


npm

npm i vue-split-carousel

yarn

yarn add vue-split-carousel

pnpm

pnpm add vue-split-carousel
`
Package path depends on the environment, the default is the Vue3 version, the package path for different environments:
Vue2 need install @vue/composition-api
- Vue3: vue-split-carousel
- Vue2.7: vue-split-carousel/vue2.7
- Vue2: vue-split-carousel/vue2
- Nuxt2: vue-split-carousel/dist/vue2.7
- Nuxt3: vue-split-carousel
- script import: script address is index.umd.js file under the corresponding Vue version directory under the dist directory

Usage

is used in , and custom content is placed inside split-carousel-item.

`html


custom content


custom content2


`

$3

`html



`


$3

`js
import Vue from 'vue'
import SplitCarousel from 'vue-split-carousel'
import App from './App.vue'

const app = createApp(App)
app.use(SplitCarousel) // Vue.use(SplitCarousel) in Vue2
app.mount('#app')


`

$3

access through window.VueSplitCarousel variable, script address is index.umd.js file under the corresponding Vue version directory under the dist directory.
Or use public npm package cdn:

`html






`

`html






`

Props

| Attribute | Description | Type | Accepted value | 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][1] | String | - | ease |
| pause-on-hover | whether pause autoplay while mouse hover | Boolean | - | true |
| arrow-visible | whether arrow visible, available when loop set to false` | String | default/always | default |

Slots

| Name | Description |
| ----- | --------------------- |
| left | customize left arrow |
| right | customize right arrow |

License

MIT

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function