carousel-vue

移动端轮播组件 for vue

支持功能(API):

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

示例:

<template>
    <div class="banner-wrap">
        <carousel :indicators="true" :auto="3000" :responsive="36.533333333333334" :on-slid-end="onSlidEnd">
            <div v-for="(item, index) in banner" :key="index"></div>
        </carousel>
    </div>
</template>
<script>
    import Carousel from '../Carousel';
    export default {
        components: {
            Carousel
        },
        methods: {
            onSlidEnd() {
                // TODO: 轮播切换完成时的回调
            }
        }
    }
</script>