https://github.com/hilongjw/vue-slide

A lightweight slide component for vue
https://github.com/hilongjw/vue-slide

vue vue-slide

Last synced: 3 months ago
JSON representation

A lightweight slide component for vue

• Host: GitHub
• URL: https://github.com/hilongjw/vue-slide
• Owner: hilongjw
• Created: 2016-03-12T09:58:48.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-01T13:27:08.000Z (over 6 years ago)
• Last Synced: 2024-01-08T01:45:18.162Z (6 months ago)
• Topics: vue, vue-slide
• Language: JavaScript
• Homepage: http://hilongjw.github.io/vue-slide/demo.html
• Size: 2.02 MB
• Stars: 209
• Watchers: 7
• Forks: 46
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Lists

• awesome-github-vue - vue-slide - vue轻量级滑动组件 (UI组件)
• awesome-vue - vue-slide - slide?style=social) - vue轻量级滑动组件 (UI组件)
• awesome-vuejs - Vue-slide ★60
• awesome-github-vue - vue-slide - vue轻量级滑动组件 (UI组件)
• awesome-github-vue - vue-slide - vue轻量级滑动组件 (UI组件)
• awesome - vue-slide - vue轻量级滑动组件 (UI组件)
• awesome-vue-refactor - Vue-slide ★60
• repo-560-awesome-vue-cn - Vue-slide ★29
• awesome-vue-cn - Vue-slide ★29

README

        
# vue-slide

# Demo

![](https://ww3.sinaimg.cn/large/69402bf8jw1fajs22iy8ng20xy0gsqv7.gif)

The demo page is [HERE](http://hilongjw.github.io/vue-slide/demo.html).

# Installation

## npm

```shell

$ npm install vue-slide

```

# Usage

## Basic

```html

    


    


```

```

import rdSwipe from 'vue-slide'

export default {

  data () {

    return {

      swipe: {

        activeIndex: 0

      },

      imgs: [

        'http://covteam.u.qiniudn.com/test18.jpg',

        'http://covteam.u.qiniudn.com/test19.jpg',

        'http://covteam.u.qiniudn.com/test20.jpg',

        'http://covteam.u.qiniudn.com/test21.jpg'

      ]

    }

  }

}

```

## Advance

```

  


    


      


        


          {{contact.text}}

        

      

      

        


        

      

    

  


import rdSwipe from './Slide.vue'

export default {

  data () {

    return {

      swipe: {

        activeIndex: 0

      },

      contacts: [{

        text: 'Page 1'

      }, {

        text: 'Page 2'

      }, {

        text: 'Page 3'

      }, {

        text: 'Page 4'

      }],

      imgs: [

        'http://covteam.u.qiniudn.com/test18.jpg',

        'http://covteam.u.qiniudn.com/test19.jpg',

        'http://covteam.u.qiniudn.com/test20.jpg',

        'http://covteam.u.qiniudn.com/test21.jpg'

      ]

    }

  },

  components: {

    rdSwipe

  },

  methods: {

    turnTo (index) {

      this.$children.map(swipe => {

          if (swipe.turnTo) {

              swipe.turnTo(index)

          }

      })

    }

  }

}

```

# License

[The MIT License](http://opensource.org/licenses/MIT)