https://github.com/shiye515/vue-m-carousel

vue 移动端轮播组件
https://github.com/shiye515/vue-m-carousel

carousel mobile-first vue

Last synced: 3 months ago
JSON representation

vue 移动端轮播组件

• Host: GitHub
• URL: https://github.com/shiye515/vue-m-carousel
• Owner: shiye515
• License: mit
• Created: 2016-07-05T06:07:58.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-08-31T09:43:06.000Z (almost 7 years ago)
• Last Synced: 2024-03-18T15:16:54.342Z (3 months ago)
• Topics: carousel, mobile-first, vue
• Language: JavaScript
• Size: 401 KB
• Stars: 53
• Watchers: 5
• Forks: 14
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-m-carousel - m-carousel?style=social) - vue 移动端轮播组件 (UI组件)
• awesome-vuejs - vue-m-carousel ★1
• awesome-github-vue - vue-m-carousel - vue 移动端轮播组件 (UI组件)
• awesome - vue-m-carousel - vue 移动端轮播组件 (UI组件)
• awesome-github-vue - vue-m-carousel - vue 移动端轮播组件 (UI组件)
• awesome-github-vue - vue-m-carousel - vue 移动端轮播组件 (UI组件)
• awesome-vue-refactor - vue-m-carousel ★1

README

        
# vue-m-carousel

vue 移动端轮播组件 [live demo](https://shiye515.github.io/vue-m-carousel/)

[1.0 branch](https://github.com/shiye515/vue-m-carousel/tree/1.0)

[![NPM version][npm-image]][npm-url]

[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/vue-m-carousel.svg?style=flat-square

[npm-url]: http://npmjs.org/package/vue-m-carousel

[download-image]: https://img.shields.io/npm/dm/vue-m-carousel.svg?style=flat-square

[download-url]: https://npmjs.org/package/vue-m-carousel

##简介（Intro）

- 移动端高性能轮播组件，体积只有 8.82 kB

- 除了vue之外不依赖其他库

- 动画通过 transform 和 translate 实现，布局通过flex实现

- 支持响应式布局，也支持固定布局

- 提供动画结束的回调

## install

[![vue-m-carousel](https://nodei.co/npm/vue-m-carousel.png)](https://npmjs.org/package/vue-m-carousel)

`npm install vue-m-carousel`

## 用法

```html

    

        
carousel-item-{{i-1}}

    

```


```javascript

import Carousel from 'vue-m-carousel'

export default {

    components: {

        Carousel

    }

}

```

## API（跟1.0版本一致）

### props

    

    

        name

        type

        default

        description

    

    

    

        

          loop

          Boolean

          true

          是否循环播放

        

        

          auto

          Number

          3000

          是否自动播放，0不自动播放，其他值则自动播放，值为其自动播放的interval

        

        

          indicators

          Boolean

          false

          是否添加屏点，不带任何样式，样式可参考demo写

        

        

          responsive

          Number

          40

          是否开启响应式高度，若为0则不开启，其他正整数表示 高度是宽度的百分之多少

        

        

          flickThreshold

          Number

          0.6

          轻弹的最小速度

        

        

          delta

          Number

          100

          滚动时触发滚动到下一张的最小值

        

        

          onSlidEnd

          Function

          noop

          轮播切换完成时的回调

        

        

          preventDefault

          Boolean

          false

          取消touchmove事件的默认动作