vue-carousel做轮播

单页面开发中，经常需要用到轮播展示相关信息，那么vue中该怎么使用轮播图呢？这次小编给大家介绍在vue中使用vue-carousel做轮播。
首先安装vue-carousel：

npm install -S vue-carousel
1

在项目中引入：

<script>
    import {Carousel, Slide} from 'vue-carousel'
    export default {
        data(){
            return {
                goods:[
                    {list:[
                        {name:'商品一'},
                        {name:'商品二'},
                        {name:'商品三'},
                        {name:'商品四'},
                        {name:'商品五'},
                        {name:'商品六'},
                        {name:'商品七'},
                        {name:'商品八'}
                    ]},
                    {list:[
                        {name:'商品八'},
                        {name:'商品七'},
                        {name:'商品六'},
                        {name:'商品五'},
                        {name:'商品四'},
                        {name:'商品三'},
                        {name:'商品二'},
                        {name:'商品一'}
                    ]}
                ]
            }
        },
        components:{
            Carousel,
            Slide
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

模板中使用：

<carousel class="index-carousel" :autoplay="true" :minSwipeDistance="40" :scrollPerPage="true" :speed="500" :perPage="1" :paginationPadding="10" :paginationSize="10" :loop="true">
    <slide class="good" v-for="(good,index) in goods">
        <div v-for="(item,index) in good.list">
            {{item.name}}
        </div>
    </slide>
</carousel>
1
2
3
4
5
6
7

至此，一个简单的轮播效果就可以实现了。