@seolhun/vue-slide

Vue-slide

A Vue Slide Component to show Banners

Installation

NPM

npm install @seolhun/vue-slide --save

Register the component

import SlideVue from '@seolhun/vue-slide'

Vue.component('vue-slide', SlideVue);

Usage

1. Default items

<!--
const banners = [
  {
    image: '',
    link: '',
  }, {
    image: '',
    link: '',
  },
]
-->
<vue-slide :items='banners'></vue-slide>

2. Custom items

<!--
const banners = [
  {
    img: '',
    url: '',
  }, {
    img: '',
    url: '',
  },
]
-->
<vue-slide :items='banners' :itemImageKey='img' :itemLinkKey='url'></vue-slide>

Props

Name	Type	Default	Description
items	Array	[]	Items to be render in the Slide
itemImageKey	String	'image'	Image key of items to show client
itemLinkKey	String	'link'	Link key of items to show client
timeout	Number	6000	Automatically changed item on timeout
isAuto	Boolean	true	Whether used or not automatically changing item
isRepeat	Boolean	true	Whether used or not repetition when reached last item.

Next Update List

• Mobile Break point prop will be added for custom.
• Touch prop will be added for mobile touch.