码迷,mamicode.com
首页 > 其他好文 > 详细

vue-carousel-3d

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

标签:ati   nbsp   配置   height   dex   轮播   item   target   efault   

 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

标签:ati   nbsp   配置   height   dex   轮播   item   target   efault   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!