swiper.jsを使用して、右上から左下に向かって階段式に斜めに流れ続けるスライドショー

<section class="p-kv" style="padding-bottom: 200px;">
  <div class="swiper p-kv-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://pro-tabi.terua-channel.com/wp-content/uploads/2024/10/im-kv01.jpg" alt="画像1" />
      </div>
      <div class="swiper-slide">
        <img src="https://pro-tabi.terua-channel.com/wp-content/uploads/2024/10/im-kv02.jpg" alt="画像2" />
      </div>
      <div class="swiper-slide">
        <img src="https://pro-tabi.terua-channel.com/wp-content/uploads/2024/10/im-kv03.jpg" alt="画像3" />
      </div>
      <div class="swiper-slide">
        <img src="https://pro-tabi.terua-channel.com/wp-content/uploads/2024/10/im-kv01.jpg" alt="画像1" />
      </div>
      <div class="swiper-slide">
        <img src="https://pro-tabi.terua-channel.com/wp-content/uploads/2024/10/im-kv02.jpg" alt="画像2" />
      </div>
      <div class="swiper-slide">
        <img src="https://pro-tabi.terua-channel.com/wp-content/uploads/2024/10/im-kv03.jpg" alt="画像3" />
      </div>
    </div>
  </div>
</section>

.p-kv {
  overflow: hidden;
}
.swiper-wrapper {
  transition-timing-function: linear;
}
.swiper-slide img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

$(function() {
  var swiper = new Swiper('.p-kv-slider', {
    autoplay: {
      delay: 0, // 自動再生の遅延を0に設定。つまり、スライダーは即座に自動再生される。
    },
    speed: 7500, // スライダーが次のスライドに切り替わるのにかかる時間を7.5秒に設定。
    spaceBetween: 20, // 各スライド間の余白を20pxに設定。
    slidesPerView: 3, // 表示するスライドの数を3枚に設定。
    loop: true, // スライダーを無限ループさせる。
    allowTouchMove: false, // タッチやドラッグでスライドを動かす操作を禁止。
    on: {
      init: function () {
        updateSlidePosition(); // スライダーが初期化されたときに呼び出され、スライドの位置を更新。
      },
      slideChange: function () {
        updateSlidePosition(); // スライドが変わるたびにスライド位置を更新。
      },
      resize: function () {
        updateSlidePosition(); // ウィンドウサイズが変更されたときにもスライド位置を更新。
      },
    },
  });

  function updateSlidePosition() {
    var slides = $('.swiper-slide img'); // 各スライド内のimg要素を取得
    var swiperWidth = $('.p-kv-slider').width(); // スライダー全体の幅を取得

    slides.each(function(index, element) {
      var slideWidth = $(element).outerWidth(); // 各スライドの幅を取得
      var slideOffsetLeft = $(element).offset().left - $('.p-kv-slider').offset().left + slideWidth * -0.1; // スライドの左端の位置を計算し、少し左にずらす
      var slideOffsetRight = slideOffsetLeft + slideWidth - slideWidth * -0.1; // スライドの右端も少し左にずらす

      var translateY = 0; // 初期のtranslateY値
      if (window.innerWidth > 768) { // PCの場合
        if (slideOffsetLeft <= swiperWidth && slideOffsetRight >= 0) {
          var positionPercentage = 1 - (slideOffsetLeft / swiperWidth); // スライダー内の位置を割合で計算
          translateY = 100 * positionPercentage; // 位置に応じて最大100pxまでY方向に移動
        }
      } else { // SPの場合
        if (slideOffsetLeft <= swiperWidth && slideOffsetRight >= 0) {
          var positionPercentage = 1 - (slideOffsetLeft / swiperWidth); // 同様に位置を割合で計算
          translateY = 50 * positionPercentage; // SPの場合は50pxまでY方向に移動
        }
      }

      $(element).css('transform', 'translateY(' + translateY + 'px)'); // 計算したtranslateY値をCSSに適用
    });
  }

  setInterval(updateSlidePosition, 100); // アニメーションのため、100msごとにスライド位置を更新
});