vue3项目开发中，轮播时，会需要一些类似3d的效果，今天整理的插件：vue3-carousel-3d一个在vue3项目中运行的3d轮播插件。如果是在vue2项目中运行的话可以使用：vue2 3d轮播插件 - vue-carousel-3d介绍

插件效果截图

动态效果

演示地址

vue3 3d环绕轮播效果

安装依赖

npm install vue3-carousel-3d
# or
yarn add vue3-carousel-3d

main.js引入插件

import Carousel3d from 'vue3-carousel-3d';

import "vue3-carousel-3d/dist/index.css"

app.use(Carousel3d)

使用实例

<template>
  <div>
    <div style="width: 100%; height: 200px;">
      <carousel-3d
          ref="carousel"
          @before-slide-change="onSlideChange"
          :autoplayTimeout="3000"
          :perspective="35"
          :display="5"
          :animationSpeed="1000"
          :width="300"
          :height="270"
          controlsVisible
          :controlsHeight="60"
      >
        <slide v-for="(item, i) in lists" :index="i" :key="i">
          <div class="carouselTitle">{{ item.title }}</div>
        </slide>
      </carousel-3d>
    </div>
    <div class="enums">
      <div
          class="enums-list"
          @click="goSlideIndex(index)"
          height="20px"
          v-for="(item, index) in lists"
          :key="index"
      >
        {{ item.title }}
      </div>
    </div>
  </div>
</template>

<script>
import { Carousel3d, Slide } from 'vue3-carousel-3d'
export default {
  components: {
    Carousel3d,
    Slide
  },
  data() {
    return {
      lists: [
        {
          title: '1',
        },
        {
          title: '2',
        },
        {
          title: '3',
        },
        {
          title: '4',
        },
        {
          title: '5',
        },
        {
          title: '6',
        },
      ],
    };
  },
  methods: {
    onSlideChange(temp) {
      console.log(this.$refs.carousel, 'xxx');
      this.carouselIndex = temp;
    },
    goSlideIndex(index) {
      if (index > this.lists.length - 1 || 0 > this.lists.length - 1) {
        return;
      }
      this.$refs.carousel.goFar(index);
    },
  },
};
</script>

<style lang="scss" scoped>
:deep(.left-1) {
  color: red;
  transform: rotateY(-40deg) translateX(-400px) translateZ(100px) !important;
}
:deep(.left-2) {
  color: red;
  transform: rotateY(-40deg) translateX(-800px) translateZ(100px) !important;
}
:deep(.right-1) {
  color: red;
  transform: rotateY(40deg) translateX(400px) translateZ(100px) !important;
}
:deep(.right-2) {
  color: red;
  transform: rotateY(40deg) translateX(800px) translateZ(100px) !important;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.enums {
  width: 300px;
  height: 30px;
  margin: 120px auto;
  display: flex;
  justify-content: center;
  // border: 1px solid black;
}
.enums-list {
  width: 30px;
  height: 100%;
  line-height: 30px;
  border: 1px solid gray;
  text-align: center;
}
</style>

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

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

源码下载

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

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

项目代码为vue3框架vue2的写法