github.com/aaron00101010/vue-split-carousel

中文文档

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

1.x version doc

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

support 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 SplitCarousel from 'vue-split-carousel'
import App from './App.vue'

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

License

MIT