Git Product home page Git Product logo

vue-m-carousel's Introduction

vue-m-carousel

vue 移动端轮播组件 live demo

1.0 branch

NPM version npm download

##简介(Intro)

  • 移动端高性能轮播组件,体积只有 8.82 kB
  • 除了vue之外不依赖其他库
  • 动画通过 transform 和 translate 实现,布局通过flex实现
  • 支持响应式布局,也支持固定布局
  • 提供动画结束的回调

install

vue-m-carousel

npm install vue-m-carousel

用法

    <carousel :indicators="true" :auto="3000">
        <div v-for="i in 3">carousel-item-{{i-1}}</div>
    </carousel>
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事件的默认动作

vue-m-carousel's People

Contributors

shiye515 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.