Vue 3D轮播插件vue-carousel-3d

安装

npm install -S vue-carousel-3d

引入

在main.js全局引入： 

import Carousel3d from 'vue-carousel-3d';
Vue.use(Carousel3d);

使用 

<template>
  <div>
    <div class="box">
      <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 :src="item.src" @click="imgClick(item,obj)" />
          </template>
        </slide>
      </carousel-3d>
    </div>
  </div>
</template>
 
<script>
import { Carousel3d, Slide } from 'vue-carousel-3d'
/* eslint-disable */
  export default {
    components: {
　　　　Carousel3d,
　　　　Slide
　　},
  data () {
    return {
      slides: [
        {
          title: 'parent',
          slide: 23424234234234,
          src: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        },
        {
          title: 'parent',
          slide: 23424234234234,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
        },
        {
          title: 'parent',
          slide: 23424234234234,
          src: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
        },
      ]
    }
  },
  methods: {
    imgClick(data,obj) {
      console.log(data,obj)
    }
  }
}
</script>
 
<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

属性名	类型	作用	默认值	可选值
perspective	[Number, String]	非主slide朝内旋转的角度	35
display	[Number, String]	显示的slide的个数	5
loop	Boolean	是否循环轮播	true
autoplay	Boolean	是否自动播放	false
animationSpeed	[Number, String]	切换动画的速度	500
dr	String	轮播旋转的方向	'rtl'	'rtl'、'ltr'
width	[Number, String]	slide的宽度	360
height	[Number, String]	slide的高度	270
border	[Number, String]	slide的边框宽度	1
space	[Number, String]	非主slide的间隔宽度	'auto'	任意数字或默认值
startIndex	[Number, String]	主slide的index	0	slide总数内的任意值
clickable	Boolean	slide是否可点击	true
disable3d	Boolean	是否取消3D效果	false
minSwipeDistance	Number	能使slide产生滑动效果的鼠标最小移动距离	10
inverseScaling	[Number, String]	非主slide离屏幕的距离	300
controlsVisible	Boolean	左右控制器是否显示	false
controlsPrevHtml	String	左控制器文本	'& lsaquo;'(无空格)
controlsNextHtml	String	右控制器文本	'& rsaquo;'(无空格)
controlsWidth	[String, Number]	控制器宽度	50
controlsHeight	[String, Number]	控制器高度	50
oneDirectional	Boolean	只在左或右显示slide	false