Javascript vue awesome swiper中的自定义转换

我一直在尝试使用vue Aweasome swiper滑块实现自定义转换。像

我已经创建了一个这样的滑块。当我将swiper选项设置为

效果：“淡入淡出”

但这与该网站上的幻灯片效果不同。它工作得很近，但有淡出效果，我不想这样。我想做的是使用SwiperJs实现一些自定义幻灯片效果

这是我的滑块.vue代码

<template>
  <div class="duel-image-carousel">
    <swiper :options="SwiperOptionDuel" ref="mySwiper">
      <swiper-slide class="duel-slide">
        <div class="swiper-image swiper-img-left">
          <img data-swiper-parallax-y="-35%" class="duel-img" src="@/assets/duel-4.jpg" alt />
          <div class="white-overlay"></div>
        </div>

        <div class="swiper-image swiper-img-right">
          <img data-swiper-parallax-y="35%" class="duel-img" src="@/assets/duel-3.jpg" alt />
          <div class="white-overlay"></div>
        </div>
      </swiper-slide>

      <!-- <swiper-slide class="duel-slide">
        <div class="swiper-image swiper-img-left">
          <img data-swiper-parallax-y="-35%" class="duel-img" src="@/assets/img/shop-look.jpg" alt />
          <div class="white-overlay"></div>
        </div>

        <div class="swiper-image swiper-img-right">
          <img data-swiper-parallax-y="35%" class="duel-img" src="@/assets/img/shop-look2.jpg" alt />
          <div class="white-overlay"></div>
        </div>
      </swiper-slide>-->

      <div class="swiper-button-prev prev-btn" slot="button-prev">
        <i class="fas fa-long-arrow-alt-left"></i>
      </div>
      <div class="swiper-button-next next-btn" slot="button-next">
        <i class="fas fa-long-arrow-alt-right"></i>
      </div>
    </swiper>
  </div>
</template>

<script lang ='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';
import { swiper, swiperSlide } from 'vue-awesome-swiper';

import {
  TimelineMax,
  gsap,
  Power4,
  Expo,
  Elastic,
  Bounce,
  onComplete,
  clearProps,
  TweenMax
} from 'gsap/all';

@Component({
  name: 'DuelImageCarousel',
  components: {
    swiper,
    swiperSlide
  }
})
export default class DuelImageCarousel extends Vue {
  SwiperOptionDuel: any = {
    slidesPerView: 1,
    direction: 'horizontal',
    loop: true,
    grabCursor: true,
    speed: 700,
    paginationClickable: true,
    parallax: true,
    autoplay: false,
    effect: 'fade',
    mousewheelControl: 1,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    }
  };

  mounted() {

  }
}
</script>

<style lang="scss" scoped>
.duel-image-carousel {
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: $section-margin;
}

.swiper-image {
  width: 50%;
  display: inline-block;
  position: relative;
  height: 80vh;
  overflow: hidden;
  @include mediaXs {
    height: 30vh;
  }
  @include mediaSm {
    height: 40vh;
  }
  @include mediaMd {
    height: 55vh;
  }

  img {
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .white-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 3;
  }
}

.swiper-img-right {
  img {
    object-position: top center;
  }
}

.swiper-button-prev,
.swiper-button-next {
  transition: all 0.3s ease-out;
  &:hover {
    background: #000;
    color: #fff;
  }
}

.swiper-button-prev {
  left: 50%;
  width: 50px;
  height: 45px;
  font-family: 'Font Awesome 5 Free';
  content: '\f30b';
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  transform: translateX(-99%);
}

.swiper-button-next {
  left: 50%;
  width: 50px;
  height: 45px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  cursor: pointer;
  transform: translateX(0%);
}
</style>

从“Vue属性装饰器”导入{Component，Prop，Vue}；
从“vue awesome swiper”导入{swiper，swiperSlide}；
进口{
TimelineMax，
gsap，
权力4，
博览会，
有弹力的
反弹
完成后，
clearProps，
吐温马克斯
}来自“gsap/all”；
@组成部分({
名称：“DuelImageCarousel”，
组成部分：{
游泳运动员，
swiperSlide
}
})
导出默认类DuelImageCarousel扩展Vue{
SwiperOptionDuel:任何={
幻灯片视图：1，
方向：'水平'，
循环：对，
格雷博：是的，
速度:700,，
paginationClickable:true，
视差：对，
自动播放：错误，
效果：“褪色”，
鼠标滚轮控制：1，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”
}
};
安装的（）{
}
}
.双图像旋转木马{
宽度：90%；
保证金：0自动；
溢出：隐藏；
页边距底部：$section页边距；
}
.swiper图像{
宽度：50%；
显示：内联块；
位置：相对位置；
高度：80vh；
溢出：隐藏；
@包括MediaX{
高度：30vh；
}
@包括中间主义{
高度：40vh；
}
@包括mediaMd{
高度：55vh；
}
img{
身高：100%；
对象匹配：覆盖；
宽度：100%；
}
.白色覆盖层{
位置：绝对位置；
排名：0；
右：0；
宽度：100%；
身高：100%；
背景：#fff；
z指数：3；
}
}
.右击{
img{
对象位置：上止点；
}
}
.swiper按钮prev，
.下一步按swiper按钮{
过渡：所有0.3秒放松；
&：悬停{
背景：#000；
颜色：#fff；
}
}
.swiper按钮prev{
左：50%；
宽度：50px；
高度：45px；
字体系列：“字体真棒5免费”；
内容：'\f30b'；
背景：#fff；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
光标：指针；
转化：translateX（-99%）；
}
.下一步按swiper按钮{
左：50%；
宽度：50px；
高度：45px；
背景：#fff；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
光标：指针；
转化：translateX（0%）；
}

我现在应该做些什么来实现这一目标？有什么想法吗？ 提前谢谢