NC

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.

show

Playground

Install

import by npm

install package

npm i vue-split-carousel -S

Local Usage

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

<style>
  #app {
    width: 800px;
    margin: 60px auto;
  }
</style>

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";
Vue.use(SplitCarousel);

new Vue({
  render: h => h(App)
}).$mount("#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">
  <head>
    <!-- import component-style -->
    <link rel="stylesheet" href="./vue-split-carousel.css" />
  </head>
  <body>
    <div id="app" style="width:800px;margin:0 auto;">
      <split-carousel>
        <split-carousel-item v-for="item in list" :key="item">
          {{ item }}
        </split-carousel-item>
      </split-carousel>
    </div>
    <!-- import vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- import component script vue-split-carousel.umd.js from dist dir -->
    <script src="./vue-split-carousel.umd.js"></script>
    <script>
      new Vue({
        data() {
          return {
            list: 6
          };
        }
      }).$mount("#app");
    </script>
  </body>
</html>

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.

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

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

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

Document

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

NameDescrition
left-arrowcustomize left arrow
right-arrowcustomize right arrow

Contribution

Development

npm i
npm run dev

Build

npm run build

License

MIT