Vk-slider-msg NPM

vk-slider-msg

[ npm (https://img.shields.io/npm/v/{{ name }}.svg)](https://www.npmjs.com/package/{{ name }})

Installation

npm install --save vk-slider-msg

Usage

global

import VkSlider from 'vk-slider-msg'
import 'vk-slider-msg/dist/vk-slider-msg.css'
// app 应用项
Vue.use(VkSlider, {app: 'fireman'})

banner

<template>
    <div id="bannerBox"></div>
</template>
<script>
  // container为必选项
  this.$banner({
    container: 'bannerBox'
  })
</script>

cover

<script>
  this.$cover()
</script>

vue组件

<template>
    // app 为必选项
    <vk-banner-bar app="fireman"></vk-banner-bar>
</template>

<script>
  this.$cover()
  this.$banner()
  this.$slider(options).$config(options)
</script>

options

const initAutoplay = {
  delay: 3000,
  disableOnInteraction: false
}
{
    app: 'fireman',
    sliderType: 'cover',  // 'banner'
    height: 500,  // slider 100 800
    width: 900,   // cover  500 900
    autoplay: false,
    loop: false,
    speed: 3000,
    container: '',
    direction: 'vertical',  // horizontal
    arrowSize: 'medium',
    effect: 'flip',  // coverflow
    hideArrow: false,
    arrowSize: 'mini'
  }

Browser

<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vk-slider-msg/dist/vk-slider-msg.min.css"></link>
<script src="vk-slider-msg/dist/vk-slider-msg.min.js"></script>

<!-- From CDN  https://unpkg.com -->
<link rel="stylesheet" href="https://unpkg.com/vk-slider-msg/dist/vk-slider-msg.min.css"></link>
<script src="https://unpkg.com/vk-slider-msg"></script>

Vue.use(window.VkSliderMsg.default, {
  app: 'fireman'
})