swiperのslider作成にて

http://aminomason.jp/
上記のサイトで使われているスライダーを
https://medium.com/@bbxxuw/swiper%E3%81%A7%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E6%99%82%E3%81%AB%E8%A4%87%E9%9B%91%E3%81%AA%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E3%81%A4%E3%81%91%E3%81%9F%E3%81%84-d475607a060a
こちらのサイトを参考にしてswiper(v4.5.3)を使い制作しているのですがうまくいきません
表示されている画像に左から右へ上書きしていくまでは
できたのですが
1枚目へ戻る際clip-pathが逆に動いてしまいます
ズームアウトはしなくても大丈夫なのでスライドだけ実装出来たら幸いです
ご教示ください

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <link rel="stylesheet" href="swiper.min.css">
8    <link rel="stylesheet" href="style.css">
9    <title>Title</title>
10</head>
11
12<body>
13    <div class="swiper-container">
14        <div class="swiper-wrapper">
15            <div class="swiper-slide">
16                <div class="slide-inner">
17                    <p>テキスト</p>
18                    <figure>
19                        <img src="images/Page 1/no1.png" alt="">
20                    </figure>
21                </div>
22            </div>
23            <div class="swiper-slide">
24                <div class="slide-inner">
25                    <p>テキスト</p>
26                    <figure>
27                        <img src="images/Page 1/no2.png" alt="">
28                    </figure>
29                </div>
30            </div>
31            <div class="swiper-slide">
32                <div class="slide-inner">
33                    <p>テキスト</p>
34                    <figure>
35                        <img src="images/Page 1/no3.png" alt="">
36                    </figure>
37                </div>
38            </div>
39            <div class="swiper-slide">
40                <div class="slide-inner">
41                    <p>テキスト</p>
42                    <figure>
43                        <img src="images/Page 1/no4.png" alt="">
44                    </figure>
45                </div>
46            </div>
47        </div>
48    </div>
49    <script src="swiper.min.js"></script>
50    <script src="slider.js"></script>
51</body>

CSS
1.swiper-container-fade .swiper-slide {
2  opacity: 1 !important;
3}
4
5.swiper-container-fade .swiper-slide .slide-inner {
6  opacity: 1;
7  width: 200%;
8  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
9          clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
10  -webkit-transition: -webkit-clip-path 2s ease-in;
11  transition: -webkit-clip-path 2s ease-in;
12  transition: clip-path 2s ease-in;
13  transition: clip-path 2s ease-in, -webkit-clip-path 2s ease-in;
14}
15
16.swiper-container-fade .swiper-slide.swiper-slide-active {
17  opacity: 1 !important;
18}
19
20.swiper-container-fade .swiper-slide.swiper-slide-active .slide-inner {
21  opacity: 1;
22  width: 200%;
23  z-index: 5 !important;
24  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
25          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
26}
27

Javascript
1let swipeOption = {
2  effect: "fade",
3  autoplay: {
4    delay: 3000,
5  },
6  speed: 0,
7}
8new Swiper('.swiper-container', swipeOption);
9