首页 > 其他 > 详细

vue-carousel-3d

时间:2020-05-04 19:12:19      阅读:46      评论:0      收藏:0      [点我收藏+]

 vue-carousel-3d插件

 

1.介绍是一款vue的3D轮播图插件,插件文档地址    https://wlada.github.io/vue-carousel-3d/

1.1.安装以及使用

// 安装

npm install -S vue-carousel-3d

// 使用的俩种方式

// 方式一全局注册

import Vue from ‘vue‘

import Carousel3d from ‘vue-carousel-3d‘

Vue.use(Carousel3d)


// 方式二组件局部注册

import { Carousel3d, Slide   } from ‘vue-carousel-3d‘

export default {

    components: {
        Carousel3d,
        Slide
    }
}

 

1.2.html部分

 

<template>

    <!--具体参数的配置请仔细查看文档-->

  <carousel-3d
    :autoplay="true"
    :autoplayTimeout="3000"
    :perspective="35"
    :display="5"
    :animationSpeed="1000"
    :width="300"
    :height="270"
    controlsVisible
    :controlsHeight="60"
  >
    <slide v-for="(item, i) in slides" :index="i" :key="i">
        
        <!--通过插槽作用域可以拿到点击的图片的索引-->
      <template slot-scope="obj">
        <img @click="imgClick(obj)" :src="item.src" alt="">
      </template>

    </slide>
  </carousel-3d>
</template>

 

 

 

 

1.3.js逻辑部分

 

<script>

export default {

    data () {

        return {

            slides: [

                {
            
                    src: ‘https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg‘
                }
            ]
        }
    }
}

</script>    

 

vue-carousel-3d

原文:https://www.cnblogs.com/zxuedong/p/12827548.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!