vue split carousel doc

11/19/2020, 1:21:17 PM

Vue Split Carousel

Build Status GitHub

A carousel component for vue,meanwhile display several carousel item.
SSR supported, compatible IE 10+ and modern browsers.




import by npm

install package

npm i vue-split-carousel -S

Local Usage

example code
  <div id="app">
      <split-carousel-item v-for="item in 8" :key="item">
        {{ item }}

  import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel";
  export default {
    components: {

  #app {
    width: 800px;
    margin: 60px auto;

Global Usage

example code
import Vue from "vue";
import App from "./App.vue";

import SplitCarousel from "vue-split-carousel";
import "vue-split-carousel/dist/vue-split-carousel.css";

new Vue({
  render: h => h(App)

import by <script>

  1. import component style from dist dir
  2. import vue.js
  3. import vue-split-carousel.umd.js
example code
<!DOCTYPE html>
<html lang="en">
    <!-- import component-style -->
    <link rel="stylesheet" href="./vue-split-carousel.css" />
    <div id="app" style="width:800px;margin:0 auto;">
        <split-carousel-item v-for="item in list" :key="item">
          {{ item }}
    <!-- import vue -->
    <script src=""></script>
    <!-- import component script vue-split-carousel.umd.js from dist dir -->
    <script src="./vue-split-carousel.umd.js"></script>
      new Vue({
        data() {
          return {
            list: 6

Browser Compatibility

animation effect is implent by CSS property transition, thus only support for IE 10+ and other modern browsers.

Component Structure

Use <split-carousel-item> in <split-carousel>,put your custom content in split-carousel-item.

    custom content
    custom content2

You can customize carousel arrow by slots arrow-left and arrow-right

  <h3 slot="left-arrow">left</h3>
    custom content
  <h3 slot="right-arrow">right</h3>


Split Carousel Attributes

AttributeDescriptionTypeAccpected ValuesDefault
speedduration of carousel item animation,in millisecondsNumber-500
autoplaywhether automatically switch carousel itemsBoolean-true
intervalinterval of switch carousel items, in millisecondsNumber-3000
loopwhether display carousel items in loopBoolean-true
initial-indexindex of initally first carousel itemNumber-0
display-amountthe amount of carousel items display in carousel containerNumber-4
item-widththe width of carousel itemsNumber-120
item-aligncarousel item alignment while carousel item amount less than display amount-center/left/rightcenter
heightheight of carouselNumber-80
timing-functionthe animation effect of carousel item,reference transition-timing-functionString-ease
arrow-area-widththe width of arrow areaNumber-50
arrow-visiblewhen arrows are show-enable/alwaysenable
hover-cancle-playwhether stop auto play while mouse hoverBoolean-true
play-directionthe moving direction of carousel item-ltr/rtlltr

Split Carousel Slots

left-arrowcustomize left arrow
right-arrowcustomize right arrow



npm i
npm run dev


npm run build