vue-carousel-3d

Posted 2021-02-20 zxuedong

 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>