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.