vue-split-carousel
TypeScript icon, indicating that this package has built-in type declarations

3.0.2 • Public • Published

中文文档

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

# 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/vue-split-carousel@3.0.1/dist/vue3/index.umd.js"></script>
<!-- vue2.7 -->
<script src="https://unpkg.com/vue-split-carousel@3.0.1/dist/vue2.7/index.umd.js"></script>
<!-- vue2 -->
<script src="https://unpkg.com/vue-split-carousel@3.0.1/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

Package Sidebar

Install

npm i vue-split-carousel

Weekly Downloads

85

Version

3.0.2

License

MIT

Unpacked Size

124 kB

Total Files

27

Last publish

Collaborators

  • aaron00101010