【Swiper】マウスホイールでスクロールして縦方向にスライドさせる方法

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="画像パス1" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス2" alt="" />
    </div>
    <div class="swiper-slide">
      <img src="画像パス3" alt="" />
    </div>
  </div>
  <!-- ページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 前後の矢印 -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

/* スライダーの高さ指定*/
.swiper-wrapper {
  height: 67vw;
}
/* 矢印の位置調整 */
.swiper-button-prev {
  left: 50%;
  margin: 0;
  top: 0;
  transform: translate(-50%, 0px) rotate(90deg);
}
.swiper-button-next {
  bottom: 0;
  left: 50%;
  margin: 0;
  top: auto;
  transform: translate(-50%, 0px) rotate(90deg);
}
/* スライドのサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

const swiper = new Swiper(".swiper", {
  loop: true, // ループ
  speed: 800, // 少しゆっくり(デフォルトは300)
  mousewheel: true, // マウスホイールでスライド
  direction: "vertical", // 縦方向
  autoplay: { // 自動再生
    delay: 1000, // 1秒後に次のスライド
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない
  },
  // ページネーション
  pagination: {
    el: ".swiper-pagination",
    clickable: true, // クリック可能にする
  },
  // 前後の矢印
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

mousewheel: true, // マウスホイールでスライド
direction: "vertical", // 縦方向