Nucleic Phosphate Modifier

    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

    Install

    npm i vue-easy-slider-custom

    DownloadsWeekly Downloads

    2

    Version

    5.3.5

    License

    MIT

    Unpacked Size

    113 kB

    Total Files

    16

    Last publish

    Collaborators

    • tunamfv