Vue 3D轮播插件vue-carousel-3d（禁止滑动方法）

video

1.安装

npm install -S vue-carousel-3d

2.在main.js全局引入：

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

3.或者直接在使用页面引入省略了上一步

import { Carousel3d, Slide } from 'vue-carousel-3d'
components: {
　Carousel3d,
　Slide
},

4.页面实操代码

<template>
  <div>
    <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" />
        </template>
      </slide>
    </carousel-3d>
  </div>
</template>
<script>
import { Carousel3d, Slide } from "vue-carousel-3d";
export default {
  components: {
    Carousel3d,
    Slide,
  },
  data() {
    return {
      slides: [
        {
          title: "parent",
          slide: 23424234234234,
          src: "https://img95.699pic.com/photo/50014/4148.jpg_wh300.jpg",
        },
        {
          title: "parent",
          slide: 23424234234234,
          src: "https://img95.699pic.com/photo/60088/7836.jpg_wh300.jpg",
        },
        {
          title: "parent",
          slide: 23424234234234,
          src: "https://img95.699pic.com/photo/50007/0704.jpg_wh300.jpg",
        },
      ],
    };
  },
  methods: {},
};
</script>
  
    <style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}
.carousel-3d-slide img {
  width: 100%;
  height: 100%;
}
</style>

5.以下是我收集的属性

属性名	类型	作用	默认值	可选值
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	左控制器文本	‘& lsaquo;’(无空格)
controlsWidth	[Number, String]	控制器宽度	50
controlsHeight	[Number, String]	控制器高度	50
oneDirectional	Boolean	只在左或右显示slide	false

<------------------注------------>
实际项目场景中如有需求让卡片禁止滑动，可给minSwipeDistance属性给大点值（99999），这样就ok；