スライダー画像の切り替わり方に関して

スライダーの切り替わり方に関してご教示いただけますと幸いです。

実現したいこと

以下の参考サイトのように、
左から右にページがめくれるような切り替わり方にしたいのですが
どのようにしたら実装できますでしょうか？
スライダーはSwiperを使用して実装しております。
参考サイト：https://www.clasico-nomura.jp/

該当のソースコード

HTML
1<div class="swiper-container">
2  <div class="swiper-wrapper">
3    <div class="swiper-slide">
4      <div class="slide-img">
5        <img class="pc" src="img/slider_01.jpg" alt="" />
6      </div>
7    </div>
8    <div class="swiper-slide">
9      <div class="slide-img">
10        <img class="pc" src="img/slider_02.jpg" alt="" />
11      </div>
12    </div>
13  </div>
14</div>

CSS
1.swiper-container {
2  width: 100%;
3}
4
5.swiper-container .swiper-wrapper .swiper-slide .slide-img {
6  height: 100vh;
7}
8
9.swiper-container .swiper-wrapper .swiper-slide .slide-img img {
10  object-fit: cover;
11  width: 100%;
12  height: 100%;
13}

JS
1let swipeOption = {
2  loop: true,
3  effect: 'fade',
4  autoplay: {
5    delay: 4000,
6    disableOnInteraction: false,
7  },
8  speed: 2000,
9}
10new Swiper('.swiper-container', swipeOption);

行動規範の内容に同意します

回答2件

下記のページのデモ #15 が参考になりそうです。

仕組みは簡単で、前のスライドと次のスライドの画像の位置を、アクティブなスライド側（中央）にずらしておくだけです。

CSS
1 .swiper-slide[class*=-prev] .slide-media img {
2      transform: translateX(100vw);
3 }
4 .swiper-slide[class*=-next] .slide-media img {
5     transform: translateX(-100vw);
6 }