https://github.com/shanamaid/vue-image-scroll

a good vue-image-scroll component!
https://github.com/shanamaid/vue-image-scroll

163music component github-page image-scroll img imgae pic scroll slider vue vue2

Last synced: about 1 month ago
JSON representation

a good vue-image-scroll component!

• Host: GitHub
• URL: https://github.com/shanamaid/vue-image-scroll
• Owner: ShanaMaid
• License: mit
• Created: 2017-02-27T10:34:17.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-05-25T13:02:52.000Z (over 7 years ago)
• Last Synced: 2024-11-14T14:16:44.670Z (about 1 month ago)
• Topics: 163music, component, github-page, image-scroll, img, imgae, pic, scroll, slider, vue, vue2
• Language: Vue
• Homepage: http://blog.shanamaid.top/vue-image-scroll/example/
• Size: 544 KB
• Stars: 77
• Watchers: 7
• Forks: 24
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-image-scroll

[![build](https://img.shields.io/badge/npm-1.0.2-blue.svg)](https://github.com/ShanaMaid/vue-image-scroll) 

[![build](https://img.shields.io/npm/l/express.svg)](https://github.com/ShanaMaid/vue-image-scroll)

[![download](https://img.shields.io/npm/dt/vue-image-scroll.svg?style=flat-square)](https://www.npmjs.com/package/vue-image-scroll)

[![NPM](https://nodei.co/npm/vue-image-scroll.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vue-image-scroll/)

一个模仿网易云音乐的vue图片滚动插件

[Live Demos](http://blog.shanamaid.top/vue-image-scroll/example)

[Documention](http://blog.shanamaid.top/vue-image-scroll/example)

based on vue 2.0

## Install

```

npm install vue-image-scroll 

```

### Local

```

git clone  https://github.com/ShanaMaid/vue-image-scroll.git

#安装依赖

npm install 

#启动

npm run dev

```

## Usage

```

  


    

  


import slider from 'vue-image-scroll';

export default {

  components: {

    slider

  },

  data: function() {

    return {

      setting: {

        image: ['1.jpg', '2.jpg', '3.jpg']

      }

    }

  }

}

          

```

## Update

- finish basics

- image add tagName and tagStyle

## Opitions

### Props

| Props     | Type    | Default | Description |

|-----------|---------|---------|-------------|

|styleObject| Object  | {width:'750',height:'240'}|scroll box style,please use lower camel case, eg: background-color => backgroundColor|

|image      | Array   | null    | imgae source path ,tagName,tagStyle; length >= 3|

|interval   | Integer | 2000    | unit: ms, rolling interval |

|imgStyle   | Object  | null    | image style, the same as `styleObject`  |

|autoRoll   | Boolean | true    |  `true` or `false` |

|direction  | String  | left    | scroll direction, `left` or `right` |

## To do

- [x] Basics

- [x] add tag for image

more!!

## License

[MIT](https://github.com/ShanaMaid/vue-image-scroll/blob/master/LICENSE)