vue-carousel做轮播

╰半橙微兮° 2022-05-14 06:26 748阅读 0赞

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

  1. 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. <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>

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

发表评论

表情：
评论列表 （有 0 条评论，748人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JavaScript做banner轮播图

    JavaScript之banner轮播图 > 轮播图分为两种，一种是点击下方圆点，图片跟随圆点的变化而变化；还有一种是这篇文章要写的：点击图片，下方圆点跟随图片的变化而变

    超、凢脫俗超、凢脫俗/ 0 赞/ 95 阅读

    相关 vue-carousel做轮播

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

    ╰半橙微兮°╰半橙微兮°/ 0 赞/ 749 阅读