Intro

vue-easy-slider is a slider component of Vue 2.x（go 1.x）.

Demo

fiddle

Install

$ npm install --save vue-easy-slider@next

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