中文文档

Vue Split Carousel

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

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

# 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

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

<split-carousel>
  <split-carousel-item>
    custom content
  </split-carousel-item>
  <split-carousel-item>
    custom content2
  </split-carousel-item>
</split-carousel>

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>
  // Vue3 && Nuxt3
  import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel"; 
  // Vue2.7
  // import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel/vue2.7"; 
  // Vue2
  // import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel/vue2"; 
  // Nuxt2
  // import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel/dist/vue2.7"; 
  export default {
    components: {
      SplitCarousel,
      SplitCarouselItem
    }
  };
</script>

Global Component

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')

Script tag imports

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:

<!-- vue3 -->
<script src="https://unpkg.com/[email protected]/dist/vue3/index.umd.js"></script>
<!-- vue2.7 -->
<script src="https://unpkg.com/[email protected]/dist/vue2.7/index.umd.js"></script>
<!-- vue2 -->
<script src="https://unpkg.com/[email protected]/dist/vue2/index.umd.js"></script>

<div id="app"></div>
<script src="https://unpkg.com/vue@3"></script>
<script src="./index.umd.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.VueSplitCarousel)
  app.mount('#app')
</script>

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 | 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