vue-easy-slider

前端 轮播
一个 Vue.js 的轮播组件
2019-05-05 我要评论 1 我要收藏

Intro

vue-easy-slider is a slider component of Vue.js.

Demo

fiddle

Install

$ npm install --save vue-easy-slider

Usage

Work on a Vue instance:

import { Slider, SliderItem } from 'vue-easy-slider'

new Vue( {
  el: 'body',
  components: {
    Slider,
    SliderItem
  }
} )
<slider width="800px"
        animation="fade"
        :interval="1000"
        :speed="1000">
  <slider-item :style="{ backgroundColor: '#3f51b5' }"></slider-item>
  <slider-item :style="{ backgroundColor: '#eee' }"></slider-item>
  <slider-item :style="{ backgroundColor: '#f44336' }"></slider-item>
</slider>

Props

Slider:

name type default description
width String auto The width of the slider
height String 300px The height of the slider
interval Number 3000 Delay of auto slider( auto option should be true )
speed Number 300 Speed of animation
auto Boolean true Autoplay
indicators 'center', 'left', 'right', false 'center' Show indicators on option position or hidden
control-btn Boolean true Show control button
animation String - { normal, fade } normal Change animation

Slots

SliderItem:

name description
default Item's content

usage:

<slider>
  <slider-item>
    <div>
      <img src="">
      <p></p>
      <button></button>
    </div>
  </slider-item>
</slider>

License

MIT

vue-easy-slider 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论