这里先粘出mui的图片轮播的本来的代码，然后把他改成vue写的就可以啦！！

<div id="slider" class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../images/yuantiao.jpg">
                            <p class="mui-slider-title">静静看这世界</p>
                        </a>
                    </div>

 <!--第1张-->        

                 <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/shuijiao.jpg">
                            <p class="mui-slider-title">幸福就是可以一起睡觉</p>
                        </a>
                    </div>

<!--第2张-->        

                <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/muwu.jpg">
                            <p class="mui-slider-title">想要一间这样的木屋，静静的喝咖啡</p>
                        </a>
                    </div>

<!--第3张-->    

                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../images/cbd.jpg">
                            <p class="mui-slider-title">Color of SIP CBD</p>
                        </a>
                    </div>

                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../images/shuijiao.jpg">
                            <p class="mui-slider-title">幸福就是可以一起睡觉</p>
                        </a>
                    </div>
                </div>
                <div class="mui-slider-indicator mui-text-right">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
            </div>

注意到的重点是：

第一张图片放的是最后一张，最后一张放的是第一张图片。

轮播的下面的提示图片数量的点点是，他们轮播的图片的数量减去你多添加的最后和开头的两个。

因为img图片的大小不太好控制，所以可以考虑利用背景图把图片加进去。

父组件,使用轮播的地方

<swiper v-bind:list="header" hidetitle="true" height="100px"  @link="link"/>

绿色的内容就是传给子组件的，子组件里通过props:[ ]接收，然后就直接可以在子组件里面使用了，相当于data一样的。

下面是swiper.vue

<template>
    <div class="mui-slider" id="slider"  ref="slider" v-bind:style="{height:_height+'px'}">
        <div class="mui-slider-group mui-slider-loop">
            <div class="mui-slider-item" v-for="db,i in ss" v-bind:class="{'mui-slider-item-duplicate':i==0||i==ss.length-1}" @tap="$emit('link',db)">//mui-slider-item-duplicate只有第一个和最后一个才有的class//$emit()接收父组件里的函数
                <a>
                    <div class="img" v-bind:style="{height:_height+'px','background-image':'url('+db.posters+')'}" v-if="i==1"></div>
                    <div class="img" v-bind:style="{height:_height+'px'}" v-lazy:background-image="db.posters" v-if="i!=1"></div>    //图片懒加载  想了解详情看我的另一篇博客http://blog.csdn.net/qq_33769914/article/details/71084676
                    <template v-if="!hidetitle">
                        <!--文章下面的标题-->
                        <p class="mui-slider-title"><b>{{title}}</b>{{db.s_title}}</p>
                    </template>
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator" v-bind:class="{'hidetitle':hidetitle }" v-if="ss.length>3"> //只有图片超过三个，也就是减去收尾重复的多余一个的时候才会有点
            <!--v-bind:class="{'titletop':!hidetitle ,'mui-text-right':!hidetitle}"-->
            <div v-bind:class="{'mui-active':i==2,'mui-indicator':true}" v-for="db,i in ss" v-if="i>1"></div>
            <!--//第一个和最后一个不用点点，所以这个点从2开始-->
        </div>
    </div>
</template>

//样式就不详说了

<style scoped>
    .mui-slider { min-height: 100px; }
    /*.title { margin-left: 30px; color: #eee; position: absolute; bottom:34px; font-size: 14px;display:none}*/
    .mui-slider-title { background-color: #0B2E4C; color: #fff; text-align: left; padding-right: 25px; font-size: 12px; color: #ccc; }
        .mui-slider-title b { color: #fff; font-size: 14px; padding-right: 10px; }
    .mui-slider-indicator.hidetitle { bottom: 0px; }
    .mui-slider-indicator { bottom: 8px; }
    .img { background-size:cover;height:100%;}
</style>

export default {    
    created(){
        this._height=window.innerWidth*30/64;
    },
    mounted(){
        this.update(this.list);
        if(this.height)this._height=this.height
    },
    data(){
        return {
            ss:[],
            _height:0
        }
    },
    props:["list","interval","title","hidetitle","height"],
        watch:{
            list(list){
                this.update(list);
            }
        },
    methods:{
        update(list){
            if(list&&list.length>0){
//              最后一张放在开头,第一张放在最后
//不能使用unshift在开头添加,因为添加的之后得到的是个数组的长度值,而不是新的数组
//var ss=list.unshift[Object.assign({top:1},list[list.length-1])];  得到的是list的长度 。参考：http://blog.csdn.net/qq_33769914/article/details/55668942
                var ss=[Object.assign({top:1},list[list.length-1])].concat(list);    
                ss.push(Object.assign({top:2},list[0]));  //变得是之前的那个ss
                this.ss=ss;
                ss.length>1&&this.$nextTick(()=>{
                    mui(this.$refs.slider).slider({interval:this.interval||5000});  //因为图片数据时最后添加进来的所以一定要写这句才能轮播。this.$refs.slider指的是页面上的ref="slider"的元素，这是node.js的用法，你也可以直接使用$("#slider").slider({interval:this.interval||5000});效果是一样的。
                })
            }
        }
    }
    }
</script>