vue2项目开发中，轮播时，会需要一些类似3d的效果，今天整理的插件：vue-carousel-3d一个3d轮播插件。如果是在vue3项目中运行的话可以使用：vue3 3d轮播插件 - vue3-carousel-3d介绍
插件效果截图
动态效果
api文档
安装依赖
pnpm i vue-carousel-3d
使用实例
<template>
<div class="carouselList">
<carousel-3d ref="carousel"
:width="234"
:height="350"
:perspective="10" :inverseScaling="500" :space="250" :loop="false"
@before-slide-change="onSlideChange">
<slide v-for="(item,index) in Lists" :key="index" :index='index'>
<item></item>
</slide>
</carousel-3d>
</div>
</template>
<script>
import {Carousel3d, Slide} from "vue-carousel-3d";
import item from './item.vue'
export default {
components: {
Carousel3d,
Slide,
item
},
data() {
return {
Lists: [
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
{},
]
}
},
methods: {
onSlideChange(temp) {
console.log(this.$refs.carousel, 'xxx');
this.carouselIndex = temp;
},
}
};
</script>
api参数
- autoplay：是否启用自动播放。类型：布尔值。默认值：false。
- autoplayTimeout：滑动前经过的时间。类型：数字。默认值：2000。
- autoplayHoverPause：是否在悬停时暂停自动播放。类型：布尔值。默认值：false。
- count：幻灯片数量（动态幻灯片需要）。类型：数字。默认值：0。
- perspective：幻灯片的透视位置。类型：数字。默认值：35。
- display：每页显示的幻灯片数量。类型：数字。默认值：5。
- bias：当显示偶数数量的幻灯片时选择较大的一侧。类型：字符串。默认值：left。
- loop：是否启用无限循环。类型：布尔值。默认值：true。
- animationSpeed：幻灯片之间的动画速度（毫秒）。类型：数字。默认值：500。
- dir：动画方向。类型：字符串。默认值：rtl。
- width：在轮播中心显示的幻灯片宽度。类型：数字。默认值：360。
- height：在轮播中心显示的幻灯片高度。类型：数字。默认值：270。
- border：幻灯片边框大小（像素）。类型：数字。默认值：1。
- space：幻灯片之间的空间（像素）。类型：数字。默认值：auto。
- startIndex：开始幻灯片索引。第一张幻灯片的索引为0。类型：数字。默认值：0。
- clickable：是否通过点击幻灯片进行导航。类型：布尔值。默认值：true。
- minSwipeDistance：在触发幻灯片前进之前需要滑动的最小距离（像素）。类型：数字。默认值：10。
- inverseScaling：幻灯片的反向缩放。类型：数字。默认值：300。
- controlsVisible：是否显示控制项（左/右箭头）。类型：布尔值。默认值：false。
- controlsPrevHtml：设置前一个箭头字符串。类型：字符串。默认值：‹。
- controlsNextHtml：设置下一个箭头字符串。类型：字符串。默认值：›。
- controlsWidth：设置箭头目标宽度区域（像素）。类型：数字。默认值：50。
- controlsHeight：设置箭头目标高度区域（像素）。类型：数字。默认值：60。
- onMainSlideClick：主幻灯片点击事件。类型：函数。默认值：无。
设置自动轮播
设置轮播代码
:autoplay="true" :autoplayTimeout="3000" :autoplayHoverPause="true"
<template>
<div class="carouselList">
<carousel-3d v-if="show" ref="carousel"
:width="234"
:height="340"
:perspective="10" :inverseScaling="500" :space="250" :loop="false"
:autoplay="true" :autoplayTimeout="3000" :autoplayHoverPause="true"
@before-slide-change="onSlideChange">
<slide v-for="(item,index) in list" :key="index" :index='index'>
<item></item>
</slide>
</carousel-3d>
</div>
</template>
点击按钮触发切换
通过点击按钮可以触发carousel-3d的切换事件。
<template>
<div class="carouselList">
<carousel-3d ref="carousel"
:width="234"
:height="230"
:perspective="5" :inverseScaling="300" :space="400" :loop="true"
@before-slide-change="onSlideChange">
<slide v-for="(item,index) in list" :key="index" :index='index'>
<div class="itemInfo">
<div class="itemImg">
<img :src="index === activeIndex ? item.imgActive : item.img" alt="">
</div>
<div class="titleDesc">
{{ item.title }}({{ item.num }})
</div>
</div>
</slide>
</carousel-3d>
<img class="icon_left" src="./assets/icon_left.png" alt="" @click="slidePrev">
<img class="icon_right" src="./assets/icon_right.png" alt="" @click="slideNext">
</div>
</template>
<script>
import img1 from './assets/img1.png'
import img1active from './assets/img1active.png'
import img2 from './assets/img2.png'
import img2acitve from './assets/img2acitve.png'
import img3 from './assets/img3.png'
import img3active from './assets/img3active.png'
import {Carousel3d, Slide} from "vue-carousel-3d";
export default {
components: {
Carousel3d,
Slide,
},
data() {
return {
activeIndex: 0,
list: [{
title: '岸桥起重机',
num: 4,
img: img1,
imgActive: img1active,
}, {
title: '场桥起重机',
num: 4,
img: img2,
imgActive: img2acitve,
}, {
title: '门式起重机',
num: 4,
img: img3,
imgActive: img3active,
},]
};
},
methods: {
onSlideChange(temp) {
this.activeIndex = temp;
this.$emit('getData', this.list[temp].title)
},
slidePrev() {
let prevIndex = (this.activeIndex - 1 + this.list.length) % this.list.length;
this.$refs.carousel.goSlide(prevIndex);
},
slideNext() {
let nextIndex = (this.activeIndex + 1) % this.list.length;
this.$refs.carousel.goSlide(nextIndex);
},
},
};
</script>
