vk-slider-msg
v1.1.8
Published
vk slider msg window banner cover
Downloads
24
Readme
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'
})
Usage
Build
npm run build:plugin
Publishing
The prepublish
hook will ensure dist files are created before publishing. This
way you don't need to commit them in your repository.
npm publish