shiye515 / vue-m-carousel Goto Github PK

View Code? Open in Web Editor NEW

53.0 5.0 14.0 411 KB

vue 移动端轮播组件

License: MIT License

JavaScript 91.94% Vue 3.96% HTML 1.29% CSS 2.81%

vue carousel mobile-first

vue-m-carousel's Introduction

vue-m-carousel

vue 移动端轮播组件 live demo

1.0 branch

##简介（Intro）

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

install

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

Stargazers

Watchers

Forkers

cxw2014 shershen08 gentlemanma jiandanautor iskevin brightidea wanlixi rubygba coolrabbit520 wangnan1305 rosewbw jianlidmeng lixinmusic rarengo

vue-m-carousel's Issues

:) Enhancement of watching auto

@shiye515
Hi. Here i want to change the option of "auto" then using a button to control the carousel if auto play.
So I added new watch function at Carousel.vue (line to 76)

auto () {
   this.setTimer()
}

It works perfectly !

要先拖动一次图片，才会开始自动播放

因为我是接口请求到的图片，我看到您那边写着是 return this.auto && this.$slots.default.length > 1; 可能是一开始读不到length 就会有这个情况

.carousel-indicators 和 dots 的样式不能覆写

看到别人有问到样式的问题,我在vue文件里重写了一下
.carousel-indicators { text-align: right; } ,无效,
.carousel-indicators { text-align: right !important; } 加了!important 也不行.

找到原因了...style标签加了scoped.... 麻烦close吧

what if add the one option to set carousel-dots position?

@shiye515
Hi, thanks for giving such wonderful component. While today i met some special requests which i should keep the carousel-dots at right corner and with customer designed UI. Although i meet all the requests with changing the css , how about to change the carousel-dots more kindly and friendly? Because i took a lot of time to read your code and demo, and then got the finial solution.

Add prev/next buttons option

For extra control over navigation between slides

使用v-for的时候会有问题

<carousel-item v-for="(index,v) in imgs">
         <img :src="v"  @click="log(index)">
</carousel-item>

使用v-for遍历写有两个问题，
1，导致循环播放不会触发（dom加载顺序晚于js的执行了，可以加个onload的解决）
2，导致轮播的首图不正确，比如两张图的情况下，首图默认为第二张了（其实不是第二张图，是下标为0的第二张图的占位图‘addonBefore’）

这两个修一下，估计会有更多人来用，毕竟做banner的时候都不会写死，一般都用v-for遍历的。
这个组件写的挺好用的！赞一个！

微信IOS版本 carousel-dot 显示数字。您能帮我看看吗？

帅哥，早上好。最近两天用到您写的组件 vue-m-carousel (https://github.com/shiye515/vue-m-carousel)，效果很好很方便。但是目前有个小问题，就是在微信IOS版本 carousel-dot 显示数字。您能帮我看看吗？