vue-slideshows

a slideshow component for vue.js.

Installation

Using npm

npm install vue-slideshows --save
#or
cnpm install vue-slideshows --save

Usage

In main.js

import Vue from 'vue'
import slideShows from 'vue-slideshows'

Vue.use(slideShows)

// new Vue({ //... })

In_.vue

<slideshow :data="imgList" @jump="jumpTo" />

export default {
  name: "demo",
  data(){
    return {
      imgList: [
        // the object must have `src` property
        // `title` : img 's title
        // `src` : img 's src
        {title: "defalut" , src: "./images/1.jpg"},
        {title: "defalut2" , src: "./images/2.jpg"},
        // ...
      ]
    }
  },
  methods: {
    jumpTo(){
      // do somethig when you click the img ...
    }
  }
}

Properties

属性 类型 说明 可选值 是否必需
w String 轮播图宽度 100% (默认) 否
h String 轮播图高度 340px ( 默认) 否
data Array of object 轮播数据 默认展示的本地测试图片
使用 :data 覆盖即可		 是
autoplay Boolean 是否开启自动循环轮播 true (默认) 否
interval Number 自动轮播间隔毫秒数 2000 (默认) 否

注意:

  1. :data prop 必须是对象数组类型，且该对象中必须包含 src 字段 （图片地址）

Events

@jump

点击某张图片时触发句柄

<slideshow @jump="jumpTo" />

export default {
  name: "demo",
  data(){
    return {}
  },
  methods: {
    jumpTo(info){
      // `info` is the data of current img
      // do somethig when you click the img ...
    }
  }
}

GitHub