vue-carousel-3d | 基于vue.js的漂亮3D轮播图组件

Vue Carousel 3D是一个用于Vue.js实现的3D轮播图组件。它使用灵活，支持触屏，支持平滑的CSS幻灯片过渡以及HTML或Vue组件内容幻灯片。

该3d轮播图插件的特点包括：

• 支持无限循环
• 支持自动播放
• 支持响应式设计
• 支持触摸滑动
• 支持鼠标滚轮滑动
• 支持键盘控制

使用方法

安装

如果您想使用vue Carousel 3D轮播图插件，首先您需要安装它，命令如下：

npm i vue-carousel-3d
// 或者
yarn add vue-carousel-3d
		

使用

全局使用

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

局部引用

// xxx.vue
import { Carousel3d, Slide } from 'vue-carousel-3d';
export default {
  ...
  components: {
    Carousel3d,
    Slide
  }
  ...
};
		

示例代码：

<carousel-3d>
  <slide :index="0">
    Slide 1 Content
  </slide>
  <slide :index="1">
    Slide 2 Content
  </slide>
</carousel-3d>		
		

使用插槽

<carousel-3d>
    <slide v-for="(slide, i) in slides" :index="i" :key="i">
        <template slot-scope="{ index, isCurrent, leftIndex, rightIndex }">
            <img :data-index="index" :class="{ current: isCurrent, onLeft: (leftIndex >= 0), onRight: (rightIndex >= 0) }" :src="slide.src">
        </template>
    </slide>
</carousel-3d>    
    

配置参数

该3d轮播图插件的可用配置参数如下：

• autoplay: 是否自动播放，默认值为false
• autoplayTimeout: 自动播放间隔时间，默认值为2000
• autoplayHoverPause: 是否在鼠标悬停时停止自动播放，默认值为fasle
• count: slides的数量，默认值为0
• perspective: 透视视角距离，默认值为35
• display: 每页显示slides的数量，默认值为5
• bias: 当显示偶数张幻灯片时，选择那一侧作为大图，默认值为'left'
• loop: 是否无限循环，默认值为true
• animationSpeed: 轮播图动画的速度，单位毫秒，默认值为500
• dir: 轮播图动画的反向，默认值为'ltr'
• width: 每张轮播图的宽度，默认值为300像素
• height: 每张轮播图的高度，默认值为270像素
• border: 轮播图的边框大小，默认值为1像素
• space: 每个幻灯片之间的间距，可以输入数字，单位为像素，也可以使用auto进行自动调整。
• startIndex: 幻灯片的开始索引，第一张幻灯片的索引为0，默认值为0
• clickable: 是否允许点击幻灯片进行切换，默认值为true
• minSwipeDistance: 触发幻灯片前进之前要滑动的最小距离（以像素为单位）,默认值为10
• inverseScaling: 幻灯片反向缩放，默认值为300
• controlsPrevHtml: 设置向前箭头按钮的HTML，默认值为‹
• controlsNextHtml: 设置向后箭头按钮的HTML，默认值为›
• controlsWidth: 设置箭头按钮的宽度，默认值为50像素
• controls-height: 设置箭头按钮的高度，默认值为60像素
• onMainSlideClick: 点击轮播图的回调函数

github网址：https://github.com/Wlada/vue-carousel-3d