@seolhun/vue slide

A Vue Slide Component to show Banners

Version: 1.0.3 Updated: 05/06/2018

By: Seolhun License: MIT

Downloads Last 30 Days: 33

Install

npm i @seolhun/vue-slide
yarn add @seolhun/vue-slide

Repository: https://github.com/Seolhun/vue-slide

CDNs

bundle.run: https://bundle.run/@seolhun/vue-slide

jsDelivr: https://cdn.jsdelivr.net/npm/@seolhun/vue-slide

unpkg: https://unpkg.com/@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.
Categories: Vue js
Tags: [VueSlide]