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



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部