Swiper

マウスホイール／タッチパッドでスライド移動

オプションの「mousewheel: true,」で、マウスホイールによるスライド切り替えを有効にする。

CSS

                  
.swiper__content {
  width: min(100%, 1000px);
  margin: 0 auto 50px;
}
.swiper {
  display: flex;
}
.swiper-slide img {
  width: min(100%, 243px);
  height: auto;
}

script

                  
    window.onload = function () {
      const swiper = new Swiper(".swiper", {
        mousewheel: true,

        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        //スライドの表示枚数
        slidesPerView: 3,
        breakpoints: {
          // 769px以上の場合
          769: {
            slidesPerView: 4,
          },
        },
      });
    }