父组件

<template>
  <div class="swipe-demo">
    <ui-swipe3D :imgList="imgList"></ui-swipe3D>
  </div>
</template>

export default {
  name: "swipe-demo",
  data() {
    return {
      imgList: [
        {
          picUrl: require("../../../assets/components/list-3.png"),
          picLink: "https://baidu1.com",
        },
        {
          picUrl: require("../../../assets/components/list-3.png"),
          picLink: "https://baidu2.com",
        },
        {
          picUrl: require("../../../assets/components/list-3.png"),
          picLink: "https://baidu3.com",
        },
        {
          picUrl: require("../../../assets/components/list-3.png"),
          picLink: "https://baidu1.com",
        },
        {
          picUrl: require("../../../assets/components/list-3.png"),
          picLink: "https://baidu2.com",
        },
        {
          picUrl: require("../../../assets/components/list-3.png"),
          picLink: "https://baidu3.com",
        },
      ],
    };
  },
  mounted() {},
  methods: {
  },
};
</script>

<style lang="scss">
</style>

子组件

<template>
  <section class="container">
    <div id="slide" class="slide index-slide" :style="{height:height}">
      <div
        class="img front"
        v-for="(item, index) in imgList"
        :key="index"
        :class="'img' + (index + 1)"
        :ref="'img' + index"
        :id="index"
        @click="$_onClick(index)"
      >
        <img :src="item.picUrl" :ref="'innderImg' + index" />
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "ui-swipe3D",
  props: {
     height: {
      type: String,
      default: "200px",
    },
    slideNub: {
      type: Number,
    },
    imgList: {
      type: Array,
    },
  },
  data() {
    return {
      slideNubs: this.imgList.length,
    };
  },
  mounted() {
    this.getImg();
  },
  methods: {
    getImg() {
      setTimeout(() => {
        if (this.slideNubs > 5) {
          for (let i = 0; i < this.slideNubs; i++) {
            if (i >= 5) {
              var refs = this.$refs["img" + i][0];
              refs.className = "img front img5";
            }
          }
        }
      }, 10);
    },
    //右滑动
    right() {
      var fy = new Array();
      for (var i = 0; i < this.slideNubs; i++) {
        let gv = "img" + i;
        fy[i] = this.$refs[gv][0].className;
      }
      for (var i = 0; i < this.slideNubs; i++) {
        let gv = "img" + i;
        if (i == 0) {
          this.$refs[gv][0].className = fy[this.slideNubs - 1];
        } else {
          this.$refs[gv][0].className = fy[i - 1];
        }
      }
    },

    //左滑动
    left() {
      var fy = new Array();
      for (var i = 0; i < this.slideNubs; i++) {
        let gv = "img" + i;
        fy[i] = this.$refs[gv][0].className;
      }
      for (var i = 0; i < this.slideNubs; i++) {
        let gv = "img" + i;
        if (i == this.slideNubs - 1) {
          this.$refs[gv][0].className = fy[0];
        } else {
          this.$refs[gv][0].className = fy[i + 1];
        }
      }
    },
    $_onClick(id) {
      let _this = this;
      let slideList = 0;
      for (var i = 0; i < this.slideNubs; i++) {
        this.$refs["innderImg" + i][0].className = "";
        let gv = "img" + i;
        if (this.$refs[gv][0].className == "img front img3") {
          slideList = parseInt(this.$refs[gv][0].id);
        }
      }
      var len = id - slideList;
      if (len > 0) {
        for (var i = 0; i < len; i++) {
          setTimeout(function () {
            _this.right();
          }, 1);
        }
      }
      if (len < 0) {
        len = -len;
        for (var i = 0; i < len; i++) {
          setTimeout(function () {
            _this.left();
          }, 1);
        }
      }
    },
  },
};
</script>

<style lang="scss">
.container {
  width: 100%;
}
.slide {
  width: 100%;
  overflow: hidden;
  position: relative;
  .img {
    overflow: hidden;
    position: absolute;
    transition: all 1s;
    img {
      width: calc(100% - 14px);
      margin: 7px;
    }
  }
  .img1 {
    width: 40%;
    height: 40%;
    top: 30%;
    left: -110%;
    z-index: 1;
  }
  .img2 {
    //左图
    width: calc(100% - 400px);
    top: 20%;
    left: -31%;
    z-index: 2;
    opacity: .7;
  }
  .img3 {
    //正中间图
    width: calc(100% - 300px);
    top: 10%;
    left: 20%;
    z-index: 3;
  }
  .img4 {
    //右图
    width: calc(100% - 400px);
    top: 20%;
    left: 85%;
    z-index: 2;
    opacity: .7;
  }
  .img5 {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 150%;
    z-index: 1;
  }
}
</style>