Display Several Carousel Component Items | vue-owl-carousel

Vue Split Carousel is a carousel component of Vue, simultaneously displaying several carousel elements.

vue carousel, vue simple carousel, vue product carousel, vuesax carousel, vue dynamic carousel, vue carousel with thumbnails, vue card carousel,

How to make use of it:

Install and download:

# NPM
$ npm i vue-split-carousel

1. Import and register the split carousel component.

// locally
import { SplitCarousel, SplitCarouselItem } from "vue-split-carousel";
  export default {
    components: {
      SplitCarousel,
      SplitCarouselItem
    }
    // ...
};
// globally
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");

2. Add the circular split component to the application template and insert the largest number of elements in the library as follows:

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

3. Component props available.

/* play */
speed: {
  type: Number,
  default: 500
},
autoplay: {
  type: Boolean,
  default: true
},
hoverCancelPlay: {
  type: Boolean,
  default: true
},
playDirection: {
  default: 'ltr',
  validator (val) {
    return ['rtl', 'ltr'].indexOf(val) !== -1
  }
},
interval: {
  type: Number,
  default: 3000
},
loop: {
  type: Boolean,
  default: true
},
initialIndex: {
  type: Number,
  default: 0
},
/* style unit */
cssUnit: {
  type: String,
  default: 'px'
},
height: {
  type: Number,
  default: 80
},
/* arrow controller */
arrowAreaWidth: {
  type: Number,
  default: 50
},
arrowVisible: {
  type: String,
  default: 'enable',
  validator (value) {
    return ['enable', 'always'].indexOf(value) !== -1
  }
},
/* item */
timingFunction: {
  type: String,
  default: 'ease'
},
displayAmount: {
  type: Number,
  default: 4
},
itemWidth: {
  type: Number,
  default: 120
},
itemAlign: {
  validator (value) {
    return ['center', 'left', 'right'].indexOf(value) !== -1
  },
  default: 'center'
}

Props

AttributeDescriptionTypeAccpected ValuesDefault
speedtransition duration of carousel item, in millisecondsNumber500
autoplaywhether automatically switch carousel itemsBooleantrue
intervalinterval of switch carousel items, in millisecondsNumber3000
loopwhether display carousel items in loopBooleantrue
display-amountthe amount of carousel items display in carousel containerNumber4
item-widththe width of carousel itemsNumber120
heightheight 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: 40vhNumber/String80
timing-functionthe animation effect of carousel item,reference transition-timing-functionStringease
pause-on-hoverwhether pause autoplay while mouse hoverBooleantrue
arrow-visiblewhether arrow visiable, avaliable when loop set to falseStringdefault/alwaysdefault

Slots

NameDescrition
leftcustomize left arrow
rightcustomize right arrow

Split Carousel Component For Vue, Vue Split Carousel Plugin/Github


See Demo And Download

Official Website(Aaron00101010): Click Here

This superior jQuery/javascript plugin is developed by Aaron00101010. For extra Advanced usage, please go to the official website.

Share