Пользовательский переход в vue -wesome-swiper

Question

Я пытался создать пользовательский переход с помощью ползунка vue -wesome-swiper. как Этот слайдер веб-сайта

Я уже создал такой слайдер. когда я устанавливаю параметр swiper на effect: "fade" Но это не тот эффект слайда, который есть на этом сайте. это работает так близко, но с эффектом затухания, и я этого не хочу. что я хочу сделать, чтобы получить некоторый пользовательский эффект слайда, используя Swiper Js

Это мой Slider. 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>

Что мне теперь делать для достижения этой цели ? Есть идеи разработчиков? Заранее спасибо.