vue-split-carousel

a carousel component for vue, display several carousel-item in carousel container
2,846 3
vue vue3 vue 3 carousel vue components carousel split
Install
npm install vue-split-carousel
Latest Version:3.0.2
Vue:2 · 3
License:MIT
Last Updated:Aug 29, 2023
Links: GitHub  ·  npm
Maintainer: aaron00101010

中文文档

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

Related Packages

vueperslides

A touch ready and responsive slideshow for Vue 3 and 2.

683,126 572
carousel vue vue 3 slideshow ui vue 2
vue-simple-carousel

Simple carousel slider for Vue.js 3

1,793 0
carousel vue vue 3 component simple slider
@tochno/ui

Vue3 UI component library.

674 4
vue 3 vue components components framework ui library ui vue framework
ropav

Vapor-native Vue 3 component library — accessible by default, styled with framew...

8,761 1
vue vue 3 vue components components ropav vapor vapor mode vue ui
@clalarco/vue3-plotly

Vue 3 component for plotly.js, with Typescript support

28,421
vue 3 plotly

Version History

Version Released Vue License
3.0.2 ~2.7.0 || ^2.7.0 || ^3.0.0 MIT
3.0.1 ~2.6.0 || ^2.7.0 || ^3.0.0 MIT
3.0.0 ~2.6.0 || ^2.7.0 || ^3.0.0 MIT
2.2.3 ^3.0.0 MIT
2.2.1 ^3.0.0 MIT