🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A lightweight, high-performance, mobile-first carousel component for Vue.js.

Carousel _Slider

Documentation

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事件的默认动作

You May Also Like