@seolhun/vue-slide

A Vue Slide Component to show Banners


Keywords
[Vue, Slide]
License
MIT
Install
npm install @seolhun/vue-slide@1.0.0

Documentation

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.