vue2 实现走马灯3d轮播效果

vue2项目开发中，需要实现轮播，并且轮播的效果类似3d效果。

效果截图

动态效果

演示地址

使用插件

这里使用到了vue-carousel-3d插件，vue-carousel-3d介绍

安装插件

pnpm i vue-carousel-3d

实例代码

我们需要使用transform来微调左右两侧两个卡片的角度，使其能够达到设计图的效果。

<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>
<style lang="scss" scoped>
:deep(.left-1) {
  transform: rotateY(-15deg) translateX(-260px) translateZ(20px) !important;
}

:deep(.left-2) {
  transform: rotateY(-20deg) translateX(-540px) translateZ(20px) !important;
}

:deep(.right-1) {
  transform: rotateY(15deg) translateX(260px) translateZ(20px) !important;
}

:deep(.right-2) {
  transform: rotateY(20deg) translateX(540px) translateZ(20px) !important;
}

.carouselList {
  position: relative;
  width: 100%;
  height: 100%;
}

</style>

<style lang="scss">
.carouselList {
  .carousel-3d-slide {
    background-color: transparent !important;
    border: 0 !important;
  }
}
</style>

vue3实现3d轮播组件

vue3 3d轮播插件 - vue3-carousel-3d介绍

源码下载

项目基于vue2+webpack+js开发，购买代码请确保有相关开发基础

虚拟产品一经售出概不退款请谅解