Vue<切割轮播图效果>

效果图：

banner.gif
注意：使用的是 vue + swiper + scss 实现的效果，有不懂 swiper使用的请参考地址https://www.jianshu.com/p/16024f32dd75
官方文档地址：https://www.swiper.com.cn/api/effects/193.html

代码如下：

<template>
  <div class="overall">
    <div id="box" class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(i,index) in list" :key="index">
          <div class="left" :class="index == active_Index ?'leftActive':''">
            <img v-if="index%2==0" :src="i.img" alt />
            <section class="text" v-else>{{i.message}}</section>
          </div>
          <div class="right" :class="index == active_Index ?'rightActive':''">
            <img v-if="index%2!=0" :src="i.img" alt />
            <section class="text" v-else>{{i.message}}</section>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import anime from "animejs/lib/anime.es.js";
export default {
  name: "HelloWorld",
  data() {
    return {
      active_Index: 0,
      list: [
        {
          message: "banner 1.",
          img: require("@/assets/img/1.jpg")
        },
        {
          message: "banner 2.",
          img: require("@/assets/img/2.jpg")
        },
        {
          message: "banner 3.",
          img: require("@/assets/img/3.jpeg")
        }
      ]
    };
  },
  mounted() {
    let _this = this;
    var mySwiper = new Swiper(".swiper-container", {
      direction: "vertical",
      mousewheel: true,
      effect: "fade",
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      on: {
        slideChangeTransitionStart: function() {
          _this.active_Index = this.activeIndex;
        }
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.nopage {
  display: none;
}
.showpage {
  display: block;
}
.swiper-wrapper {
  background: #3d3d3d;
}
#box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  .swiper-slide-active {
    display: block;
  }
  .swiper-slide {
    overflow: hidden;
    position: relative;
    .left,
    .right {
      width: 90%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      background: #3d3d3d;
      transition: 1s;
      img {
        transition: 1.5s;
        display: block;
        position: absolute;
        transform: skewX(30deg) scale(1);
      }
      .text {
        width: 50%;
        height: 100%;
        transform: skewX(30deg);
        font-size: 40px;
        font-weight: 700;
        color: white;
        text-transform: uppercase;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: 1.5s;
      }
    }
    .left {
      left: -40%;
      transform: skewX(-30deg) translateY(-100%);
      img {
        right: -30%;
      }
      .text {
        right: 0%;
      }
    }
    .right {
      right: -40%;
      transform: skewX(-30deg) translateY(100%);
      img {
        left: -30%;
      }

      .text {
        left: 0%;
      }
    }
    .leftActive,
    .rightActive {
      img {
        transform: skewX(30deg) scale(1.1);
      }
      .text {
        opacity: 1;
      }
    }
    .leftActive {
      transform: skewX(-30deg) translateY(0);
    }
    .rightActive {
      transform: skewX(-30deg) translateY(0);
    }
  }
}
</style>