.swiper-container
  .swiper-wrapper
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/1` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/2` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/3` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/4` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/5` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/6` alt)
  .swiper-button-prev
  .swiper-button-next
      
script(src="https://unpkg.com/swiper/swiper-bundle.min.js")

@import "https://unpkg.com/swiper/swiper-bundle.min.css";

.swiper-container {
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
}

document.querySelectorAll('.swiper-slide img').forEach((el, i) => {
  el.addEventListener('click', () => {
    alert(i + 1);
  });
});

let swiperTouchStartX;

new Swiper('.swiper-container', {
  slidesPerView: 3,
  on: {
    init(swiper) {
      // スライド総数
      const totalSlidesLen = swiper.slides.length;

      /**
       * 戻るボタンクリック時の処理
       */
      swiper.el.querySelector('.swiper-button-prev').addEventListener('click', () => {
        if (swiper.isBeginning) {
          swiper.slideTo(totalSlidesLen - 1);
        } else {
          swiper.slideTo(swiper.realIndex - 1);
        }
      });
      /**
       * 進むボタンクリック時の処理
       */
      swiper.el.querySelector('.swiper-button-next').addEventListener('click', () => {
        if (swiper.isEnd) {
          swiper.slideTo(0);
        } else {
          swiper.slideTo(swiper.realIndex + 1);
        }
      });
    },
    /**
     * Swiper上でドラッグされ始めたときの処理
     */
    touchStart(swiper, e) {
      /**
       * タッチされたX座標を保存
       * タッチ時とクリック時でイベントの返り値が変わるため処理を分岐
       */
      if (e.type === 'touchstart') {
        swiperTouchStartX = e.touches[0].clientX;
      } else {
        swiperTouchStartX = e.clientX;
      }
    },
    /**
     * Swiper上でドラッグし終わったときの処理
     */
    touchEnd(swiper, e) {
      // スワイプ判定のしきい値
      const tolerance = 150;
      // スライド総数
      const totalSlidesLen = swiper.slides.length;

      // 左にスワイプしたか右にスワイプしたかを判定
      const diff = (() => {
        if (e.type === 'touchend') {
          return e.changedTouches[0].clientX - swiperTouchStartX;
        } else {
          return e.clientX - swiperTouchStartX;
        }
      })();

      /**
       * タッチ開始時と、タッチ終了時のカーソルの座標を比較し、下記のどちらかに分岐させる。
       */
      // 最初のスライド上で左にスワイプされたときは最後のスライドに飛ばす
      if (swiper.isBeginning && diff >= tolerance) {
        swiper.slideTo(totalSlidesLen - 1);
      // 最後のスライド上で右にスワイプさせたときは最初のスライドに飛ばす
      } else if (swiper.isEnd && diff <= -tolerance) {
        // 一瞬待ってから最初のスライドに飛ばす
        // （少し遅らせないと、最初のスライドに戻った後に右スワイプ判定が走って2番目のスライドに飛ばされてしまうため）
        setTimeout(() => {
          swiper.slideTo(0);
        }, 1);
      }
    },
  },
});