vue-easy-slider-custom
TypeScript icon, indicating that this package has built-in type declarations

5.3.5 • Public • Published

vue-easy-slider

Travis branch prettier NPM package NPM downloads GitHub license

Keep slider simple!

Demo

demo

Install

npm i -S vue-easy-slider

Usage

Plugin install:

import Vue from 'vue'
import EasySlider from 'vue-easy-slider'
 
Vue.use(EasySlider)

Or work on a Vue instance:

<slider animation="fade">
  <slider-item
    v-for="(i, index) in list"
    :key="index"
    :style="i"
    @click="hello"
  >
    <p style="line-height: 280px; font-size: 5rem; text-align: center;">Page{{ index + 1 }}</p>
  </slider-item>
</slider>
import { Slider, SliderItem } from 'vue-easy-slider'
 
new Vue({
  el: 'body',
  components: {
    Slider,
    SliderItem,
  },
  data() {
    return {
      list: [
        { backgroundColor: '#3f51b5', width: '100%', height: '100%' },
        { backgroundColor: '#eee', width: '100%', height: '100%' },
        { backgroundColor: '#f44336', width: '100%', height: '100%' },
      ],
    }
  },
  methods: {
    hello($event) {
      console.log(`hello index: ${$event}`)
    },
  },
})

Control slider with v-model

<slider animation="fade" v-model="sliderIndex">
  ...
</slider>
<button @click="moveToIndex(2)">move to page 3</button>
...
  data() {
    return {
      // initial index
      sliderIndex: 1,
      list: [
        { backgroundColor: '#3f51b5', width: '100%', height: '100%' },
        { backgroundColor: '#eee', width: '100%', height: '100%' },
        { backgroundColor: '#f44336', width: '100%', height: '100%' },
      ],
    }
  },
  methods: {
    moveToIndex(index) {
      this.sliderIndex = index
    },
  },
...

Props

Slider:

name type default description
width String auto Slider width
height String 300px Slider height
touch Boolean true Enable touch slide
animation 'normal', 'fade' 'normal' Change animation
autoplay Boolean true Autoplay
stopOnHover Boolean false Stop autoplay when hover
interval Number 3000 Delay of autoplay ( autoplay option should be true )
speed Number 500 Speed(ms) of animation
indicators 'center', 'left', 'right', false 'center' Show indicators on option position or hide indicators
control-btn Boolean true Show control button
before-next Function () => true Before next guard, sliding to next item when this function return true
before-previous Function () => true Before previous guard

Events

Slider:

name description $event
change Fires when the slide change number // index of slides
next Fires when the button for the next slide was pressed { original: number, next: number }
previous Fires when the button for the previous slide was pressed { original: number, next: number }

Slots

SliderItem:

name description
default Item content
loading Loading placeholder

usage:

<slider>
  <slider-item>
    <img src="">
    <p></p>
    <button></button>
  </slider-item>
  <div slot="loading">custom loading ...</div>
</slider>

License

MIT

Dependencies (0)

    Dev Dependencies (20)

    Package Sidebar

    Install

    npm i vue-easy-slider-custom

    Weekly Downloads

    6

    Version

    5.3.5

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    16

    Last publish

    Collaborators

    • tunamfv